import type {FunctionComponent} from 'react'
import {useState} from 'react'
import {StyleSheet} from 'react-native'
import Animated from 'react-native-reanimated'
import ColorPickerLib, {
  BlueSlider,
  colorKit,
  GreenSlider,
  OpacitySlider,
  PreviewText,
  RedSlider,
  Swatches,
} from 'reanimated-color-picker'
import {Text} from '@/components/ui/text'
import {VStack} from '@/components/ui/vstack'
import {HStack} from '@/components/ui/hstack'
import {Button, ButtonText} from '@/components/ui/button'
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogCloseButton,
  AlertDialogContent,
  AlertDialogHeader,
} from '@/components/ui/alert-dialog'

interface ColorPickerProps {
  // The color used to initialise the picker.
  color: string
  // Called when the user presses the OK button.
  onColorChosen: (color: string) => void
  // Called when the user presses the OK or Cancel buttons.
  onClose: () => void
  // Determine if the picker is visible.
  showPicker: boolean
}

const ColorPicker: FunctionComponent<ColorPickerProps> = ({color, onColorChosen, showPicker, onClose}) => {
  const [selectedColorJS, setSelectedColorJS] = useState(color)
  const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex())

  return (
    <AlertDialog isOpen={showPicker} onClose={onClose}>
      <AlertDialogBackdrop />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogCloseButton />
        </AlertDialogHeader>
        <AlertDialogBody>
          <Animated.View className="m-4 flex h-full justify-center">
            <ColorPickerLib
              value={selectedColorJS}
              sliderThickness={25}
              thumbSize={24}
              thumbShape="circle"
              onChangeJS={color => setSelectedColorJS(color.rgba)}
              thumbAnimationDuration={100}
              adaptSpectrum
              boundedThumb>
              <Text className="font-bold my-2">Red</Text>
              <RedSlider style={styles.sliderStyle} />

              <Text className="font-bold my-2">Green</Text>
              <GreenSlider style={styles.sliderStyle} />

              <Text className="font-bold my-2">Blue</Text>
              <BlueSlider style={[styles.sliderStyle]} />

              <Text className="font-bold my-2">Opacity</Text>
              <OpacitySlider style={styles.sliderStyle} />

              <VStack className="my-4 items-center flex-nowrap">
                <Swatches colors={customSwatches} />
                <PreviewText style={{color: selectedColorJS}} colorFormat="rgba" />
              </VStack>

              <HStack className="flex-row justify-end gap-4">
                <Button onPress={onClose} variant="outline">
                  <ButtonText>Cancel</ButtonText>
                </Button>
                <Button
                  onPress={() => {
                    onColorChosen(selectedColorJS)
                    onClose()
                  }}
                  variant="outline">
                  <ButtonText>Ok</ButtonText>
                </Button>
              </HStack>
            </ColorPickerLib>
          </Animated.View>
        </AlertDialogBody>
      </AlertDialogContent>
    </AlertDialog>
  )
}

const styles = StyleSheet.create({
  sliderStyle: {
    borderRadius: 20,
  },
})

export default ColorPicker
