import React, { useState } from 'react';
import { ChevronRight, X } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';

const AddMoreDialog = ({ open, setOpen, onAdd }: { open: any; setOpen: any, onAdd: any }) => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("")
  const handleSave = () => {
    let data = {
      name: title,
      desc: description
    };
    onAdd(data);
  };

  return (
    <Dialog
      open={open?.addmore}
      onOpenChange={(value: any) => setOpen({ ...open, addmore: value })}
    >
      <DialogTrigger asChild>
        <button className="flex w-full items-center justify-between p-4">
          <div>
            <p className="text-start font-medium">Make your own</p>
            <p className="text-sm text-gray-500">
              Create your own variation if no template fits.
            </p>
          </div>
          <ChevronRight className="h-5 w-5" />
        </button>
      </DialogTrigger>
      <DialogContent className="max-w-lg">
        <DialogHeader className="flex flex-row items-center justify-between">
          <DialogTitle>Add More</DialogTitle>
          <Button
            variant="ghost"
            onClick={() => setOpen({ ...open, addmore: false })}
          >
            <X className="h-6 w-6" />
          </Button>
        </DialogHeader>

        <div className="space-y-6">
          <div className="space-y-4">
            <div>
              <label className="text-sm font-medium">Title of the group</label>
              <Input
                placeholder="Enter the title of the group"
                className="mt-1"
                onChange={(e) => setTitle(e.target.value)}
              />
            </div>

            <div>
              <label className="text-sm font-medium">
                Description of the variant group
              </label>
              <Textarea
                placeholder="Enter the description of the group"
                className="mt-1 w-full rounded-md  p-2"
                rows={4}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>
          </div>

          <Button
            className="w-full bg-yellow-400 text-black hover:bg-[var(--primary-brand)]"
            onClick={handleSave}
          >
            Save
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default AddMoreDialog;