import React from 'react';
import {
  StyleSheet,
  TextStyle,
  View,
  ViewStyle,
  ImageStyle,
  Image,
} from 'react-native';
import { Slider, SliderProps } from '@miblanchard/react-native-slider';
import { useEmojiSlider, useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLEmojiSliderStyles = {
  thumpImage: ImageStyle;
  sliderTrack: ViewStyle;
  sliderThumbImage: ImageStyle;
  trackMarkContainer: ViewStyle;
  trackMarkLine: ViewStyle;
  trackMarkText: TextStyle;
  minimumTrackStyle: ViewStyle;
  maximumTrackStyle: ViewStyle;
};

export type SliderUIComponentProps = SliderProps;

export type LLEmojiSliderProps = ComponentStyleProp<LLEmojiSliderStyles> & {
  thumbImages: { min: number; imageUrl: string }[];
  onSlidingComplete: (value: number) => void;
  onValueChange?: (value: number) => void;
  value: number;
  initialValue?: number;
  average?: number;
  disabled?: boolean;
  /** SliderProps from  @miblanchard/react-native-slider package*/
  sliderUIComponentProps?: SliderUIComponentProps;
};

export function LLEmojiSlider({
  styles: stylesProp,
  thumbImages,
  onValueChange,
  onSlidingComplete,
  initialValue,
  value,
  disabled,
  average,
  sliderUIComponentProps,
}: LLEmojiSliderProps) {
  const styles = useStyles({
    componentStylesFn: getEmojiSliderStyles,
    stylesProp,
  });
  const {
    sliderInput,
    thumbImg,
    onSlidingCompleteHandler,
    onValueChangeHandler,
  } = useEmojiSlider({
    thumbImages,
    onValueChange,
    onSlidingComplete,
    initialValue,
    value,
  });

  return (
    <Slider
      minimumValue={0}
      maximumValue={1}
      onValueChange={onValueChangeHandler}
      onSlidingComplete={onSlidingCompleteHandler}
      value={sliderInput}
      disabled={disabled}
      trackMarks={average ? [average] : undefined}
      trackStyle={styles.sliderTrack}
      minimumTrackStyle={styles.minimumTrackStyle}
      maximumTrackStyle={styles.maximumTrackStyle}
      renderTrackMarkComponent={() =>
        !!average && (
          <View style={styles.trackMarkContainer}>
            <View style={styles.trackMarkLine}></View>
            <LLText style={styles.trackMarkText}>Avg.</LLText>
          </View>
        )
      }
      renderThumbComponent={() =>
        thumbImg && (
          <Image source={{ uri: thumbImg }} style={styles.sliderThumbImage} />
        )
      }
      {...sliderUIComponentProps}
    />
  );
}

const getEmojiSliderStyles: LLComponentStyleFn<LLEmojiSliderStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    thumpImage: {},
    sliderTrack: {
      height: 3,
      borderRadius: 0,
    },
    sliderThumbImage: {
      width: 30,
      height: 30,
    },
    trackMarkContainer: {
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      alignItems: 'center',
      top: 10,
    },
    trackMarkLine: {
      height: 18,
      width: 2,
      backgroundColor: theme.text,
    },
    trackMarkText: {
      marginTop: 4,
      fontSize: 10,
      color: theme.text,
    },
    minimumTrackStyle: {
      backgroundColor: theme.primaryButtonBackground,
    },
    maximumTrackStyle: {
      backgroundColor: theme.widgetOption,
    },
  });