/* eslint-disable react-native/no-inline-styles */
import React, {forwardRef, useImperativeHandle, useState} from 'react';
import {
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  ViewStyle,
} from 'react-native';
import {
  RadioButton,
  RadioButtonProps,
  TextInput,
  TextInputProps,
} from 'react-native-paper';
import {useTheme} from '../Theme';

type FormFieldProps = Omit<
  TextInputProps & {initialValue: string},
  'value' | 'onChangeText' | 'ref'
>;

export type FormFieldRef = {
  get: () => string | boolean;
  set: (input: string) => void;
};

export const FormField = forwardRef<FormFieldRef, FormFieldProps>(
  (props, ref) => {
    const [input, setInput] = useState(
      props.initialValue ? props.initialValue : '',
    );
    useImperativeHandle(ref, () => ({
      get() {
        return input;
      },
      set(inp) {
        setInput(inp);
      },
    }));
    return (
      <TextInput
        {...props}
        value={input}
        onChangeText={text => setInput(text)}
      />
    );
  },
);

type RadioGroupProps = Omit<
  {
    options: string[];
    label: string;
    viewStyle?: ViewStyle;
    labelStyle?: TextStyle;
    initialValue?: string;
  } & RadioButtonProps,
  'status' | 'onPress' | 'value' | 'style'
>;
type RadioGroupRef = {
  get: () => string | boolean;
  set: (input: string) => void;
};

export const RadioGroup = forwardRef<RadioGroupRef, RadioGroupProps>(
  (props, ref) => {
    const [checked, setChecked] = useState(
      props.initialValue ? props.initialValue : '',
    );

    const onPressHandler = (option: string) =>
      checked === option ? setChecked('') : setChecked(option);

    useImperativeHandle(ref, () => ({
      get() {
        return checked;
      },
      set(inp) {
        setChecked(inp);
      },
    }));
    return (
      <View style={props.viewStyle}>
        <Text
          style={[
            RadioButtonStyles.text,
            RadioButtonStyles.label,
            props.labelStyle,
          ]}>
          {props.label}
        </Text>
        {props.options.map(option => (
          <View style={RadioButtonStyles.container} key={option}>
            <RadioButton
              {...props}
              value={option}
              status={checked === option ? 'checked' : 'unchecked'}
              onPress={() => onPressHandler(option)}
            />
            <TouchableWithoutFeedback onPress={() => onPressHandler(option)}>
              <Text style={RadioButtonStyles.text}>{option}</Text>
            </TouchableWithoutFeedback>
          </View>
        ))}
      </View>
    );
  },
);

const RadioButtonStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  text: {
    color: 'black',
  },
  label: {
    fontSize: 15,
    fontWeight: 'bold',
  },
});

export const ToggleGroup = forwardRef<RadioGroupRef, RadioGroupProps>(
  (props, ref) => {
    const theme = useTheme();
    const [checked, setChecked] = useState(
      props.initialValue ? props.initialValue : '',
    );

    const onPressHandler = (option: string) =>
      checked === option ? setChecked('') : setChecked(option);

    useImperativeHandle(ref, () => ({
      get() {
        return checked;
      },
      set(inp) {
        setChecked(inp);
      },
    }));
    return (
      <View style={[props.viewStyle]}>
        {props.options.map((option, index) => {
          return (
            <TouchableOpacity
              style={[
                ToggleButtonStyles.container,
                {
                  borderLeftWidth: index !== 0 ? 1 : 0,
                  borderRightWidth: index !== props.options.length - 1 ? 1 : 0,
                  borderTopWidth: 0,
                  borderBottomWidth: 0,
                  borderTopLeftRadius: index === 0 ? 50 : 0,
                  borderBottomLeftRadius: index === 0 ? 50 : 0,
                  borderTopRightRadius:
                    index === props.options.length - 1 ? 50 : 0,
                  borderBottomRightRadius:
                    index === props.options.length - 1 ? 50 : 0,
                  backgroundColor:
                    checked === option
                      ? theme && theme.radio && theme.radio.activeSelectionColor
                        ? theme.radio.activeSelectionColor
                        : '#0f0'
                      : theme && theme.radio && theme.radio.baseColor
                      ? theme.radio.baseColor
                      : '#fff',
                },
              ]}
              key={option}
              onPress={() => onPressHandler(option)}>
              <Text
                style={[
                  ToggleButtonStyles.text,
                  {
                    color: checked === option ? '#fff' : '#B7B7B7',
                  },
                ]}>
                {option}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  },
);

const ToggleButtonStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 20,
    flex: 1,
    borderWidth: 2,
    borderColor: '#B7B7B7',
  },
  text: {
    fontWeight: 'bold',
    textTransform: 'uppercase',
    fontSize: 16,
    fontFamily: 'Inter-Black',
  },
  label: {
    fontSize: 15,
    fontWeight: 'bold',
  },
});