import { useState } from 'react';
import { Modal, Pressable, Text, View } from 'react-native';

import { Button } from './button';

export type SheetSelectOption<T extends string> = {
  description?: string;
  label: string;
  value: T;
};

export const SheetSelect = <T extends string>({
  disabled = false,
  label,
  onChange,
  options,
  value,
}: {
  disabled?: boolean;
  label: string;
  onChange: (value: T) => void;
  options: SheetSelectOption<T>[];
  value: T;
}) => {
  const [open, setOpen] = useState(false);
  const selected = options.find((option) => option.value === value);

  const choose = (nextValue: T) => {
    onChange(nextValue);
    setOpen(false);
  };

  return (
    <View className='gap-2'>
      <Text className='text-muted-foreground text-xs font-medium'>{label}</Text>
      <Pressable
        className={
          disabled
            ? 'border-border bg-muted/50 rounded-md border px-3 py-3 opacity-60'
            : 'border-border bg-background rounded-md border px-3 py-3'
        }
        disabled={disabled}
        onPress={() => setOpen(true)}
      >
        <Text className='text-foreground font-medium'>
          {selected?.label ?? 'Select'}
        </Text>
        {selected?.description ? (
          <Text className='text-muted-foreground mt-1 text-xs'>
            {selected.description}
          </Text>
        ) : null}
      </Pressable>
      <Modal
        animationType='slide'
        onRequestClose={() => setOpen(false)}
        transparent
        visible={open}
      >
        <View className='flex-1 justify-end bg-black/40'>
          <View className='bg-background border-border max-h-[80%] gap-3 rounded-t-lg border-t p-4'>
            <View className='flex-row items-center justify-between'>
              <Text className='text-foreground text-lg font-semibold'>
                {label}
              </Text>
              <Button variant='ghost' onPress={() => setOpen(false)}>
                Cancel
              </Button>
            </View>
            <View className='gap-2'>
              {options.map((option) => {
                const active = option.value === value;
                return (
                  <Pressable
                    key={option.value}
                    className={
                      active
                        ? 'border-primary bg-primary/10 rounded-md border p-3'
                        : 'border-border rounded-md border p-3'
                    }
                    onPress={() => choose(option.value)}
                  >
                    <Text className='text-foreground font-medium'>
                      {option.label}
                    </Text>
                    {option.description ? (
                      <Text className='text-muted-foreground mt-1 text-xs'>
                        {option.description}
                      </Text>
                    ) : null}
                  </Pressable>
                );
              })}
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};
