import React, { useEffect, useState } from 'react';
import { Button, HStack, VStack, View, Heading } from 'native-base';
import { FontAwesome } from '@expo/vector-icons';
import { useDebounce, usePrevious, useDarkMode } from '../../hooks';
import { COLORS } from '../../theme';
import cn from 'classnames';
import { Slider, SliderProps } from '@miblanchard/react-native-slider';

type TemperatureSetterProps = Omit<
  SliderProps,
  'onSlidingComplete' | 'minimumValue' | 'maximumValue' | 'animationType'
> & {
  initialValue: number;
  className?: string;
  onDone: (val: number) => void;
  minimumValue?: number;
  maximumValue?: number;
};

const TemperatureSetter = ({
  minimumValue = 15,
  maximumValue = 30,
  onDone,
  initialValue,
  className,
  ...rest
}: TemperatureSetterProps) => {
  const [value, setValue] = useState<number>(initialValue);
  const isDarkMode = useDarkMode();

  // Debounce value to prevent too many requests
  const debouncedValue = useDebounce(value, 500);
  // Store previous value to compare with current one to avoid update on mount
  const previousValue = usePrevious(debouncedValue);

  // Update temperature only when user stops sliding or clicks on +/- buttons
  useEffect(() => {
    if (
      debouncedValue !== undefined &&
      previousValue !== undefined &&
      debouncedValue !== previousValue
    ) {
      onDone(debouncedValue);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedValue]);

  const buttonOnPressHandler = (add: boolean) => {
    setValue(prev => {
      if (prev === undefined) return prev;
      return prev + (add ? 1 : -1);
    });
  };

  return (
    <VStack className={cn('gap-y-3', className)}>
      <HStack className="items-center justify-center">
        <Button
          disabled={(value ?? minimumValue) <= minimumValue}
          className="px-5"
          onPress={() => buttonOnPressHandler(false)}
          bg={COLORS.blue[600]}
          _dark={{ bg: COLORS.blue[600] }}
        >
          <FontAwesome name="minus" color={COLORS.white} />
        </Button>
        <Heading className="w-1/3 text-center">{value}°C</Heading>
        <Button
          disabled={(value ?? maximumValue) >= maximumValue}
          className="px-5"
          onPress={() => buttonOnPressHandler(true)}
          bg={COLORS.blue[600]}
          _dark={{ bg: COLORS.blue[600] }}
        >
          <FontAwesome name="plus" color={COLORS.white} />
        </Button>
      </HStack>
      <View className="mt-3">
        <Slider
          {...rest}
          animationType="timing"
          step={1}
          value={value}
          onValueChange={val => setValue(val[0])}
          minimumValue={minimumValue}
          maximumValue={maximumValue}
          minimumTrackTintColor={COLORS.blue[600]}
          maximumTrackTintColor={isDarkMode ? COLORS.gray[400] : COLORS.gray[300]}
          thumbTintColor={COLORS.blue[700]}
          trackStyle={{
            height: 10,
            borderRadius: 12,
          }}
        />
      </View>
    </VStack>
  );
};

export default TemperatureSetter;
