import { useContext, useRef, useState } from "react";
import {
  Pressable,
  StyleSheet,
  TouchableHighlight,
  TouchableOpacity,
  View,
} from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";
import ColorPicker, {
  BrightnessSlider,
  InputWidget,
  OpacitySlider,
  Panel3,
  Swatches,
  ColorPickerRef,
} from "reanimated-color-picker";
import MyIcon from "../Icon";
import { AppContext, AppStyles, VibrateShort } from "../../utils";
/*
function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
  const backgroundColorStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: sharedColor.value,
    };
  });

  const contrastColorText = useAnimatedStyle(() => {
    const getContrastRatio = (hexColor) => {
      const hex = hexColor.replace("#", "");
      const r = parseInt(hex.substr(0, 2), 16);
      const g = parseInt(hex.substr(2, 2), 16);
      const b = parseInt(hex.substr(4, 2), 16);
      const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
      return luminance > 0.5 ? "#000000" : "#ffffff";
    };

    let obj = {};

    obj.color = getContrastRatio(sharedColor.value);

    return obj;
  });

  const contrastColorBorder = useAnimatedStyle(() => {
    const getContrastRatio = (hexColor) => {
      const hex = hexColor.replace("#", "");
      const r = parseInt(hex.substr(0, 2), 16);
      const g = parseInt(hex.substr(2, 2), 16);
      const b = parseInt(hex.substr(4, 2), 16);
      const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
      return luminance > 0.5 ? "#000000" : "#ffffff";
    };

    let obj = {};

    //obj.color = getContrastRatio(sharedColor.value);

    if (selected === true) {
      obj.borderColor = getContrastRatio(sharedColor.value);
      obj.borderBottomWidth = 2;
    } else {
      obj.borderBottomWidth = 0;
    }

    return obj;
  });

  return (
    <TouchableHighlight
      style={[
        {
          width: 30,
          height: 30,
          borderRadius: 10,
          marginRight: 10,
          elevation: 3,
        },
      ]}
      onPress={onPress}
      rippleColor="rgba(0, 0, 0, .32)"
    >
      <Animated.View
        style={[
          {
            width: "100%",
            height: "100%",
            justifyContent: "center",
            alignItems: "center",
            borderRadius: 10,
          },
          backgroundColorStyle,
        ]}
      >
        <Animated.View style={contrastColorBorder}>
          <Animated.Text
            style={[
              {
                fontSize: 16,
                fontWeight: "bold",
              },
              contrastColorText,
            ]}
          >
            {layerNumber}
          </Animated.Text>
        </Animated.View>
      </Animated.View>
    </TouchableHighlight>
  );
}
/*
export default function MyColorPicker({ colorLayer }) {
  const appContext = useContext(AppContext);
  const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
  const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);

  const selectedColorPickerColor = useSharedValue("#ddd");
  const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
  const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
  const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
  const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);

  const onColorSelect = (color) => {
    selectedColorPickerColor.value = color.hex;

    switch (selectedGlasLayer) {
      case 1:
        selectedColorLayer1.value = color.hex;
        break;
      case 2:
        selectedColorLayer2.value = color.hex;
        break;
      case 3:
        selectedColorLayer3.value = color.hex;
        break;
      case 4:
        selectedColorLayer4.value = color.hex;
        break;
    }
  };

  return (
    <Animated.View>
      <ColorPicker
        value={selectedColorPickerColor.value}
        thumbSize={26}
        onChange={onColorSelect}
      >
        <View
          style={{
            justifyContent: "center",
            flexDirection: "row",
            alignItems: "center",
            marginBottom: 10,
          }}
        >
          <ColorLayer
            layerNumber={1}
            sharedColor={selectedColorLayer1}
            selected={selectedGlasLayer === 1}
            onPress={() => {
              setSelectedGlasLayer(1);
              selectedColorPickerColor.value = selectedColorLayer1.value;
            }}
          />
          <ColorLayer
            layerNumber={2}
            sharedColor={selectedColorLayer2}
            selected={selectedGlasLayer === 2}
            onPress={() => {
              setSelectedGlasLayer(2);
              selectedColorPickerColor.value = selectedColorLayer2.value;
            }}
          />
          <ColorLayer
            layerNumber={3}
            sharedColor={selectedColorLayer3}
            selected={selectedGlasLayer === 3}
            onPress={() => {
              setSelectedGlasLayer(3);
              selectedColorPickerColor.value = selectedColorLayer3.value;
            }}
          />
          <ColorLayer
            layerNumber={4}
            sharedColor={selectedColorLayer4}
            selected={selectedGlasLayer === 4}
            onPress={() => {
              setSelectedGlasLayer(4);
              selectedColorPickerColor.value = selectedColorLayer4.value;
            }}
          />
        </View>

        <TouchableOpacity
          onPress={() =>
            setColorSwatchesFavorites([
              ...colorSwatchesFavorites,
              selectedColorPickerColor.value,
            ])
          }
          style={{
            position: "absolute",
            top: 20,
            right: 0,
          }}
        >
          <MyIcon
            name="star-outline"
            color={appContext.appTheme.icon}
            size={20}
          />
        </TouchableOpacity>

        <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
          <Panel3 style={{ width: 200 }} />

          <BrightnessSlider style={styles.sliderStyle} vertical reverse />

          <OpacitySlider style={styles.sliderStyle} vertical reverse />
        </View>

        <Swatches
          style={styles.swatchesContainer}
          swatchStyle={styles.swatchStyle}
          colors={colorSwatchesFavorites}
        />

        {appContext.isUserExpertModeEnabled && (
          <View style={styles.previewTxtContainer}>
            <InputWidget
              inputStyle={{
                color: appContext.appTheme.text,
                paddingVertical: 2,
                borderColor: "#707070",
                fontSize: 12,
                marginLeft: 5,
              }}
              iconColor="#707070"
            />
          </View>
        )}
      </ColorPicker>
    </Animated.View>
  );
} */

export function MyColorPickerV2({
  pickerRef,
  isUserExpertModeEnabled,
  appThemeText,
  onColorPickerChange,
  onColorPickerComplete,
  onColorSwatchPress,
  disabled,
  style,
}) {
  const appContext = useContext(AppContext);
  const selectedColorPickerColor = useSharedValue("#fff");

  return (
    <Animated.View style={style}>
      <ColorPicker
        ref={pickerRef}
        value={selectedColorPickerColor.value}
        thumbSize={26}
        onChange={(color) => {
          selectedColorPickerColor.value = color.hex;
          onColorPickerChange(color.hex);
        }}
        boundedThumb
        onComplete={onColorPickerComplete}
      >
        {disabled && (
          <View
            style={{
              position: "absolute",
              width: "100%",
              zIndex: 2,
            }}
          >
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-evenly",
              }}
            >
              <View
                style={{
                  backgroundColor: appContext.appTheme.colorPickerDisabled,
                  height: 200,
                  width: 200,
                  borderRadius: 100,
                }}
              />
              <View
                style={{
                  backgroundColor: appContext.appTheme.colorPickerDisabled,
                  width: 25,
                  height: 180,
                  marginTop: 20,
                  borderRadius: 20,
                }}
              />
            </View>
          </View>
        )}

        <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
          <Panel3 style={{ width: 200 }} />

          <OpacitySlider style={styles.sliderStyle} vertical reverse />
        </View>

        <View
          style={{
            flexDirection: "row",
            flexWrap: "wrap",
            gap: 10,
            justifyContent: "center",
            marginTop: 10,
          }}
        >
          {appContext.userColorSwatchesFavorites.map((color, i) => (
            <TouchableHighlight
              key={i}
              disabled={disabled}
              style={{ borderRadius: 16 }}
              onPress={() => {
                pickerRef.current.setColor(color);
                onColorPickerChange(color);
                onColorSwatchPress();
              }}
              onLongPress={() => {
                let filteredColors =
                  appContext.userColorSwatchesFavorites.filter(
                    (c) => c !== color
                  );

                appContext.setUserColorSwatchesFavorites(filteredColors);

                VibrateShort();
              }}
            >
              <View>
                <MyColorSwatch size={28} backgroundColor={color} />
              </View>
            </TouchableHighlight>
          ))}

          <TouchableHighlight
            disabled={disabled}
            onPress={() => {
              if (
                !appContext.userColorSwatchesFavorites.includes(
                  selectedColorPickerColor.value
                )
              ) {
                appContext.setUserColorSwatchesFavorites([
                  ...appContext.userColorSwatchesFavorites,
                  selectedColorPickerColor.value,
                ]);
              }
            }}
            style={{ borderRadius: 16 }}
          >
            <View
              style={[
                {
                  backgroundColor: "#c5c6c9",
                  width: 28,
                  height: 28,
                  borderRadius: 16,
                  justifyContent: "center",
                  alignItems: "center",
                },
                AppStyles.Shadow,
                disabled && { opacity: 0.6 },
              ]}
            >
              <MyIcon name="plus" size={26} color="#6f6e6f" />
            </View>
          </TouchableHighlight>
        </View>

        {isUserExpertModeEnabled && (
          <View style={styles.previewTxtContainer}>
            <InputWidget
              inputStyle={{
                color: appThemeText,
                paddingVertical: 2,
                borderColor: "#707070",
                fontSize: 12,
                marginLeft: 5,
              }}
              iconColor="#707070"
            />
          </View>
        )}
      </ColorPicker>
    </Animated.View>
  );
}

export function MyColorSwatch({ size, backgroundColor, style }) {
  return (
    <View
      style={[
        {
          backgroundColor: backgroundColor,
          width: size,
          height: size,
          borderRadius: 16,
        },
        AppStyles.Shadow,
        style,
      ]}
    />
  );
}

const styles = StyleSheet.create({
  previewTxtContainer: {
    paddingTop: 20,
    marginTop: 20,
    borderTopWidth: 1,
    borderColor: "#bebdbe",
  },
  panelStyle: {
    width: "60%",
    height: "60%",
    alignSelf: "center",
    borderRadius: 16,
  },
  sliderStyle: {
    borderRadius: 20,
    marginTop: 20,
    width: 10,
  },
  swatchesContainer: {
    borderTopWidth: 1,
    borderColor: "#bebdbe",
    marginTop: 20,
    paddingTop: 20,
    justifyContent: "center",
    gap: 10,
  },
  swatchStyle: {
    borderRadius: 20,
    height: 25,
    width: 25,
    margin: 0,
    marginBottom: 0,
    marginHorizontal: 0,
    marginVertical: 0,
  },
});
