import React from 'react';
import {
  Image,
  ImageStyle,
  StyleSheet,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import {
  LLWidgetOptionResultBar,
  LLWidgetOptionResultBarProps,
} from './LLWidgetOptionResultBar';
import { LLText } from '../LLText';

export type LLWidgetOptionStyles = {
  optionContainer: ViewStyle;
  selectedOptionContainer: ViewStyle;
  correctOptionContainer: ViewStyle;
  incorrectOptionContainer: ViewStyle;
  optionImage: ImageStyle;
  optionTextContainer: ViewStyle;
  optionText: TextStyle;
  percentText: TextStyle;
};

export type LLWidgetOptionProps = ComponentStyleProp<LLWidgetOptionStyles> & {
  optionIndex: number;
  percentage: number;
  optionImage?: string;
  optionText?: string;
  optionDisabled: boolean;
  showWidgetResult: boolean;
  selectedOptionIndex: number;
  correctOption?: boolean;
  onOptionChange: (optionIndex: number) => void;
  OptionResultBarComponent?: typeof LLWidgetOptionResultBar;
  OptionResultBarComponentStyles?: LLWidgetOptionResultBarProps['styles'];
};

export function LLWidgetOption({
  optionImage,
  optionText,
  optionDisabled,
  optionIndex,
  selectedOptionIndex,
  correctOption,
  onOptionChange,
  showWidgetResult,
  percentage,
  styles: stylesProp,
  OptionResultBarComponent = LLWidgetOptionResultBar,
  OptionResultBarComponentStyles,
}: LLWidgetOptionProps) {
  const styles = useStyles({
    componentStylesFn: getWidgetOptionStyles,
    stylesProp,
  });

  if (!optionImage && !optionText) {
    return undefined;
  }

  return (
    <TouchableOpacity
      style={[
        styles.optionContainer,
        selectedOptionIndex === optionIndex && styles.selectedOptionContainer,
        correctOption !== undefined &&
          (correctOption
            ? styles.correctOptionContainer
            : styles.incorrectOptionContainer),
      ]}
      onPress={() => onOptionChange(optionIndex)}
      disabled={optionDisabled}
    >
      {!!optionImage && (
        <Image source={{ uri: optionImage }} style={styles.optionImage}></Image>
      )}
      <View style={styles.optionTextContainer}>
        <LLText style={styles.optionText}>{optionText}</LLText>
        {showWidgetResult && !!percentage && (
          <OptionResultBarComponent
            valueInPercent={percentage}
            styles={OptionResultBarComponentStyles}
          />
        )}
      </View>

      {showWidgetResult && (
        <LLText style={styles.percentText}>{percentage}%</LLText>
      )}
    </TouchableOpacity>
  );
}

const getWidgetOptionStyles: LLComponentStyleFn<LLWidgetOptionStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    optionContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      height: 45,
      marginVertical: 4,
      borderRadius: 4,
      paddingHorizontal: 14,
      backgroundColor: theme.widgetOption,
    },
    selectedOptionContainer: {
      backgroundColor: theme.widgetSelectedOption,
    },
    correctOptionContainer: {
      borderWidth: 2,
      borderColor: theme.correct,
      paddingHorizontal: 12,
    },
    incorrectOptionContainer: {
      borderWidth: 2,
      borderColor: theme.incorrect,
      paddingHorizontal: 12,
    },
    optionImage: {
      width: 42,
      height: 41,
      marginVertical: 2,
      marginRight: 14,
    },
    optionTextContainer: {
      flex: 1,
      height: '100%',
      paddingVertical: 10,
      justifyContent: 'center',
      alignItems: 'flex-start',
    },
    optionText: {
      fontSize: 12,
      lineHeight: 15,
      textAlignVertical: 'center',
      color: theme.text,
    },
    percentText: {
      marginLeft: 10,
      color: theme.text,
    },
  });