import React, { useContext, useState } from "react";
import { ThemeContext } from "context/context";
import { RadioContainer, RadioInput, RadioLabel, RadioCheck } from "./style";
import { TextStyle, TouchableWithoutFeedback, ViewStyle } from "react-native";

export interface IRadioProps {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  label?: string;
  isChecked?: boolean;
  customLabelStyle?: TextStyle;
  customRadioStyles?: ViewStyle;
  customRadioCheckStyles?: ViewStyle;
}

export const AtomRadio = ({
  label = "",
  isChecked = false,
  disabled = false,
  onChange,
  value,
  customLabelStyle,
  customRadioStyles,
  customRadioCheckStyles,
}: IRadioProps) => {
  const { fontFamily } = useContext(ThemeContext);

  const [fakeFocus, setFakeFocus] = useState(false);

  return (
    <TouchableWithoutFeedback
      testID="touchable"
      disabled={disabled}
      delayPressOut={1000}
      onPressOut={() => setFakeFocus(false)}
      onPress={() => {
        setFakeFocus(true);
        onChange(value);
      }}
    >
      <RadioContainer testID="container" fakeFocus={fakeFocus}>
        <RadioInput
          testID="radio"
          disabled={disabled}
          style={customRadioStyles}
        >
          {isChecked ? (
            <RadioCheck
              testID="checked"
              disabled={disabled}
              style={customRadioCheckStyles}
            />
          ) : null}
        </RadioInput>
        {!!label && (
          <RadioLabel
            testID="label"
            disabled={disabled}
            fontFamily={fontFamily}
            style={customLabelStyle}
          >
            {label}
          </RadioLabel>
        )}
      </RadioContainer>
    </TouchableWithoutFeedback>
  );
};
