import React from 'react';
import {
  View,
  Image,
  ImageStyle,
  StyleSheet,
  TextStyle,
  ViewStyle,
  TextInput,
} from 'react-native';
import { INumberPredictionItemOption } from '@livelike/javascript';
import {
  useStyles,
  useTheme,
  useNumberPredictionWidgetOption,
  useCustomFontStyle,
} from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLNumberPredictionWidgetOptionStyles = {
  optionContainer: ViewStyle;
  validOptionContainer: ViewStyle;
  optionImage: ImageStyle;
  optionDescriptionContainer: ViewStyle;
  optionDescriptionText: TextStyle;
  resultContainer: ViewStyle;
  resultText: TextStyle;
  correctResultContainer: ViewStyle;
  incorrectResultContainer: ViewStyle;
  numberInput: TextStyle;
  correctNumberInput: TextStyle;
  incorrectNumberInput: TextStyle;
};

export type LLNumberPredictionWidgetOptionProps =
  ComponentStyleProp<LLNumberPredictionWidgetOptionStyles> & {
    widgetId: string;
    optionIndex: number;
    numberOption: INumberPredictionItemOption;
    onOptionInputChange: (
      option: INumberPredictionItemOption,
      index: number
    ) => void;
  };

export function LLNumberPredictionWidgetOption({
  widgetId,
  optionIndex,
  numberOption,
  onOptionInputChange,
  styles: stylesProp,
}: LLNumberPredictionWidgetOptionProps) {
  const { theme } = useTheme();
  const styles = useStyles({
    componentStylesFn: getWidgetOptionStyles,
    stylesProp,
  });
  const optionDetails = useNumberPredictionWidgetOption({
    widgetId,
    optionIndex,
    numberOption,
  });
  const numberInputStyle = useCustomFontStyle({
    style: [
      styles.numberInput,
      optionDetails?.showWidgetResult &&
        (optionDetails?.isCorrect
          ? styles.correctNumberInput
          : styles.incorrectNumberInput),
    ],
  });

  if (!optionDetails) {
    return undefined;
  }

  const {
    widgetOption,
    showWidgetResult,
    isCorrect,
    isWidgetOptionDisabled,
    interactedNumberOption,
  } = optionDetails;
  const { correct_number, image_url, description, id } = widgetOption;

  return (
    <View
      style={[
        styles.optionContainer,
        interactedNumberOption &&
          interactedNumberOption.number !== undefined &&
          styles.validOptionContainer,
      ]}
    >
      {!!image_url && (
        <Image source={{ uri: image_url }} style={styles.optionImage}></Image>
      )}
      <View style={styles.optionDescriptionContainer}>
        <LLText style={styles.optionDescriptionText}>{description}</LLText>
      </View>
      {showWidgetResult && correct_number !== undefined && (
        <View
          style={[
            styles.resultContainer,
            isCorrect
              ? styles.correctResultContainer
              : styles.incorrectResultContainer,
          ]}
        >
          <LLText style={styles.resultText}>{correct_number}</LLText>
        </View>
      )}
      <TextInput
        style={numberInputStyle}
        onChangeText={(text) =>
          onOptionInputChange(
            {
              optionId: id,
              number: text === '' ? undefined : Number(text),
            },
            optionIndex
          )
        }
        value={`${interactedNumberOption?.number ?? ''}`}
        keyboardType="numeric"
        placeholder="-"
        placeholderTextColor={theme.text}
        editable={!isWidgetOptionDisabled}
        textAlign="center"
      />
    </View>
  );
}

const getWidgetOptionStyles: LLComponentStyleFn<
  LLNumberPredictionWidgetOptionStyles
> = ({ theme }) =>
  StyleSheet.create({
    optionContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      height: 45,
      marginVertical: 4,
      borderRadius: 4,
      paddingLeft: 12,
      backgroundColor: theme.widgetOption,
    },
    validOptionContainer: {
      backgroundColor: theme.widgetSelectedOption,
    },
    optionImage: {
      width: 42,
      height: 41,
      marginVertical: 2,
      marginRight: 12,
    },
    optionDescriptionContainer: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'flex-start',
      flex: 1,
    },
    optionDescriptionText: {
      fontSize: 12,
      lineHeight: 15,
      color: theme.text,
    },
    resultContainer: {
      width: 33,
      height: 23,
      borderRadius: 2,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 10,
    },
    resultText: {
      textAlignVertical: 'center',
      lineHeight: 15,
      color: theme.correctIncorrectText,
    },
    correctResultContainer: {
      backgroundColor: theme.correct,
    },
    incorrectResultContainer: {
      backgroundColor: theme.incorrect,
    },
    numberInput: {
      margin: 6,
      width: 47,
      padding: 6,
      borderRadius: 2,
      textAlign: 'center',
      textAlignVertical: 'center',
      backgroundColor: theme.widgetBackground,
      color: theme.text,
    },
    correctNumberInput: {
      borderWidth: 1,
      borderColor: theme.correct,
    },
    incorrectNumberInput: {
      borderWidth: 1,
      borderColor: theme.incorrect,
    },
  });