import React, { useEffect, useRef, useContext, useState } from "react";
import { Animated } from "react-native";
import { ThemeContext } from "context/context";
import { IFontWeight, ISetup } from "interfaces";
import {
  ToggleWrapper,
  ToggleContainer,
  StatusText,
  LabelContainer,
  LabelText,
  StatusTextContainer,
  ToggleSwitchXs,
  InnerCircleXs,
} from "./styles";
import { keysFamily, theme } from "data/dataMx";

export interface IToggleProps {
  isChecked?: boolean;
  onText?: string;
  offText?: string;
  labelText?: string;
  size?: "xs" | "2xs";
  onToggle: () => void;
  disabled?: boolean;
  focus?: boolean;
  family?: keysFamily;
}

export const AtomToggle = ({
  isChecked = false,
  onText = "",
  offText = "",
  labelText = "",
  size = "xs",
  disabled = false,
  focus = false,
  onToggle,
  family = "regular",
}: IToggleProps) => {
  const [checked, setChecked] = useState<boolean>(isChecked);
  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[family as keyof IFontWeight];
  const fontWeight: number =
    fontFamily.weight[font as keyof typeof fontFamily.weight];
  const [background, setBackground] = useState<string>("");
  const [detailBG, setDetailBG] = useState<string>("");

  const toggleDimesions = {
    xs: {
      width: 48,
      translateX: 26,
    },
    "2xs": {
      width: 32,
      translateX: 17,
    },
  };

  const offsetX = useRef(new Animated.Value(0)).current;
  const dimensions =
    size === undefined ? toggleDimesions.xs : toggleDimesions[size];

  const createInsideCircleStyle = () => [
    {
      transform: [{ translateX: offsetX }],
    },
  ];

  useEffect(() => {
    let toValue;
    if (checked) {
      toValue = dimensions.width - dimensions.translateX;
    } else {
      toValue = -1;
    }

    Animated.timing(offsetX, {
      toValue,
      duration: 300,
      useNativeDriver: false,
    }).start();
  });

  const colorOnPressed = () => {
    if (checked == false) {
      setBackground(theme.neutral100);
      setDetailBG(theme.primary400);
    } else {
      setBackground(theme.primary400);
      setDetailBG(theme.neutral100);
    }
    setTimeout(() => {
      setBackground("");
      setDetailBG("");
    }, 400);
  };

  useEffect(() => {
    setChecked(isChecked);
  }, [isChecked]);

  useEffect(() => {
    createInsideCircleStyle();
  }, [size]);

  useEffect(() => {
    colorOnPressed();
  }, [checked]);

  return (
    <ToggleWrapper>
      <LabelContainer>
        {!!labelText && (
          <LabelText fontWeight={fontWeight} font={font}>
            {labelText}
          </LabelText>
        )}
      </LabelContainer>
      <ToggleContainer focus={focus}>
        <ToggleSwitchXs
          size={size}
          testID="toggle-switch"
          checked={checked}
          disabled={disabled}
          activeOpacity={0.8}
          background={background}
          color={detailBG}
          focus={focus}
          onPress={() => {
            if (!disabled) {
              setChecked(!checked);
              onToggle();
            }
          }}
        >
          <InnerCircleXs
            size={size}
            focus={focus}
            as={Animated.View}
            checked={checked}
            disabled={disabled}
            style={createInsideCircleStyle()}
            color={detailBG}
          />
        </ToggleSwitchXs>
        <StatusTextContainer>
          <StatusText fontWeight={fontWeight} font={font} testID="status-text">
            {checked ? onText : offText}
          </StatusText>
        </StatusTextContainer>
      </ToggleContainer>
    </ToggleWrapper>
  );
};
