import React from 'react';
import { ColorName } from '@emotion/react';
import { Container, StyleSystemThemedProps, TouchableHighlight } from 'components/layout';
import { TouchableHighlightProps as TouchableHighlightPropsBase } from 'react-native';

export const RangeSlide: React.FC<RangeSlideType> = ({
  colorVariant,
  width,
  height = 6,
  trackColor = 'base-01',
  trackTintColor = 'body',
  slideWidth = 6,
  slideBorderRadius = 0,
  slideColor = 'caption',
  ...props
}) => {
  return (
    <TouchableHighlight backgroundColor={trackColor} width={width} height={height} {...props}>
      <>
        <Container />
        <Container
          borderRadius={slideBorderRadius}
          backgroundColor={trackTintColor}
          flexGrow={1}
          alignItems="flex-end"
          width={100}
        >
          <Container
            position="absolute"
            borderRadius={slideBorderRadius}
            backgroundColor={slideColor}
            flexGrow={1}
            top={-(16 / 2)}
            height={20}
            width={slideWidth}
          />
        </Container>
      </>
    </TouchableHighlight>
  );
};

export type RangeSlideVariant = 'outline' | 'underline' | 'underline-inactive';

export type RangeSlideColorVariant =
  | 'primary'
  | 'primary-hover'
  | 'secondary'
  | 'secondary-hover'
  | 'base'
  | 'title'
  | 'base-01'
  | 'base-02'
  | 'base-02-hover'
  | 'base-03'
  | 'body'
  | 'divider'
  | 'caption'
  | 'transparent';

export type RangeSlideSizeVariant =
  | 'undefined'
  | 'content'
  | 'extra-small'
  | 'small'
  | 'medium'
  | 'large'
  | 'extra-large'
  | '2-extra-large';

type RangeSlideShapeVariant = 'square' | 'round';
type RangeSlideType = StyleSystemThemedProps & TouchableHighlightPropsLocal & RangeSlideProps;

export interface TouchableHighlightPropsLocal extends TouchableHighlightPropsBase {
  variant?: RangeSlideVariant;
  sizeVariant?: RangeSlideSizeVariant;
  colorVariant?: RangeSlideColorVariant;
  shapeVariant?: RangeSlideShapeVariant;
}

export interface RangeSlideProps {
  slideColor?: ColorName;
  slideWidth?: number;
  slideBorderRadius?: number;
  trackColor?: ColorName;
  trackTintColor?: ColorName;
  hoverColorVariant?: RangeSlideColorVariant;
}