import React, { useState } from 'react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { CellType, Column, useTableStore } from '@/store/tableStore';

const AddColumn: React.FC<{ tableId: string }> = ({ tableId }) => {
  const { addColumn } = useTableStore();

  const [newOption, setNewOption] = useState('');
  const [columnName, setColumnName] = useState('');
  const [columnType, setColumnType] = useState<CellType>('text');
  const [selectOptions, setSelectOptions] = useState<string[]>([]);

  const handleAddOption = () => {
    if (newOption.trim()) {
      setSelectOptions([...selectOptions, newOption.trim()]);
      setNewOption('');
    }
  };

  const handleRemoveOption = (indexToRemove: number) => {
    setSelectOptions(
      selectOptions.filter((_, index) => index !== indexToRemove)
    );
  };

  const handleSave = () => {
    if (columnName && columnType) {
      const newColumn: Column = {
        name: columnName,
        type: columnType,
        options: columnType === 'select' ? selectOptions : undefined,
      };
      addColumn(tableId, newColumn);

      setColumnName('');
      setColumnType('text');
      setSelectOptions([]);
      setNewOption('');
    }
  };

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Add Column</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Add Column</SheetTitle>
        </SheetHeader>
        <div className="flex flex-col gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input
              id="name"
              value={columnName}
              onChange={(e) => setColumnName(e.target.value)}
              className="col-span-3"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="type" className="text-right">
              Type
            </Label>
            <Select onValueChange={(value) => setColumnType(value as CellType)}>
              <SelectTrigger className="col-span-3">
                <SelectValue placeholder="Select column type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="text">Text</SelectItem>
                <SelectItem value="number">Number</SelectItem>
                <SelectItem value="select">Select</SelectItem>
                {/* Add more column types as needed */}
              </SelectContent>
            </Select>
          </div>
          {columnType === 'select' && (
            <>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="option" className="text-right">
                  Option
                </Label>
                <Input
                  id="option"
                  value={newOption}
                  onChange={(e) => setNewOption(e.target.value)}
                  className="col-span-2"
                />
                <Button onClick={handleAddOption}>Add</Button>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label className="text-right">Options</Label>
                <ul className="col-span-3 flex list-disc flex-col gap-4 pl-5">
                  {selectOptions.map((option, index) => (
                    <li
                      key={index}
                      className="flex items-center justify-between"
                    >
                      <span>{option}</span>
                      <Button
                        variant="destructive"
                        size="sm"
                        onClick={() => handleRemoveOption(index)}
                      >
                        Remove
                      </Button>
                    </li>
                  ))}
                </ul>
              </div>
            </>
          )}
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit" onClick={handleSave}>
              Save changes
            </Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
};

export default AddColumn;