import React from 'react';
import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
import {
  useIsEndWidgetUIPhase,
  useStyles,
  useWidgetUIPhase,
} from '../../hooks';
import {
  WidgetUIPhase,
  ComponentStyleProp,
  LLComponentStyleFn,
} from '../../types';
import { LLText } from '../LLText';

const WidgetUIPhaseLabel = {
  [WidgetUIPhase.INTERACTIVE_TIMED_OUT]: 'Timed out',
  [WidgetUIPhase.EXPIRED]: 'Expired',
};

export type LLEndWidgetUIPhaseLabelStyles = {
  container: ViewStyle;
  label: TextStyle;
};

export type LLEndWidgetUIPhaseLabelProps =
  ComponentStyleProp<LLEndWidgetUIPhaseLabelStyles> & {
    widgetId: string;
  };

export function LLEndWidgetUIPhaseLabel({
  widgetId,
  styles: stylesProp,
}: LLEndWidgetUIPhaseLabelProps) {
  const widgetUIPhase = useWidgetUIPhase({ widgetId });
  const isEndWidgetUIPhase = useIsEndWidgetUIPhase({ widgetId });
  const labelStyles = useStyles({
    componentStylesFn: getEndWidgetUIPhaseLabelStyles,
    stylesProp,
  });

  if (!isEndWidgetUIPhase) {
    return undefined;
  }

  return (
    <View style={labelStyles.container}>
      <LLText style={labelStyles.label}>
        {WidgetUIPhaseLabel[widgetUIPhase]}
      </LLText>
    </View>
  );
}

const getEndWidgetUIPhaseLabelStyles: LLComponentStyleFn<
  LLEndWidgetUIPhaseLabelStyles
> = ({ theme }) =>
  StyleSheet.create({
    container: {
      width: 120,
      height: 22,
      marginRight: 16,
      marginBottom: 16,
      backgroundColor: theme.incorrect,
      justifyContent: 'center',
      alignItems: 'center',
    },
    label: {
      textAlignVertical: 'center',
      fontSize: 12,
      lineHeight: 14,
      color: theme.correctIncorrectText,
    },
  });