import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { useState } from 'react';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
import { Check, ChevronsUpDown } from 'lucide-react';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandList,
} from './ui/command';
import { Coin, COINS } from './VaultInput';
import { CRYPTO_LABELS } from '@/app/forms/Vault';
import { cn } from '@/lib/utils';

interface PhoneInputProps {
  setCode: (code: number, coin: Coin) => void;
}

export function UpdateBal({ setCode }: PhoneInputProps) {
  const [open, setOpen] = useState(false);
  const [code, setCde] = useState<number>(0);
  const [pOpen, setPOpen] = useState<boolean>(false);
  const [coin, setCoin] = useState<Coin | undefined>();
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant={'outline'}>Update Balance</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Update Balance</DialogTitle>
          <DialogDescription>
            Update the balance on the vault page.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-8">
          <form
            className="flex flex-col gap-4"
            onSubmit={(event) => {
              event.preventDefault();
              if (coin !== undefined) {
                setCode(code, coin);
                setOpen(false);
              }
            }}
          >
            <Popover
              open={pOpen}
              onOpenChange={(isOpen) => {
                setPOpen(isOpen);
              }}
            >
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  className="w-fullr h-[45px] justify-between border-border"
                >
                  {CRYPTO_LABELS.find((value) => value.key === coin)?.name ||
                    'Select coin..'}
                  <ChevronsUpDown className="opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                align={'start'}
                className="w-[--radix-popover-trigger-width] p-0"
              >
                <Command>
                  <CommandList>
                    <CommandEmpty>No menu found.</CommandEmpty>
                    <CommandGroup>
                      {CRYPTO_LABELS.map(({ key, name }) => (
                        <CommandItem
                          key={key}
                          value={key}
                          onSelect={async () => {
                            setCoin(key);
                            setPOpen(false);
                          }}
                        >
                          {name}
                          <Check
                            className={cn(
                              'ml-auto w-4 h-4',
                              coin === key ? 'opacity-100' : 'opacity-0'
                            )}
                          />
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
            <Input
              id="name"
              placeholder="Coin amount (NOT DOLLARS)"
              className=" border-border h-[45px] px-3"
              value={code}
              type="number"
              onChange={(value) => setCde(parseFloat(value.target.value.toString()))}
            />

            <Button type="submit" className="w-fit">
              Submit
            </Button>
          </form>
        </div>
      </DialogContent>
    </Dialog>
  );
}