import React, { useState } from 'react';
import { SText } from '../s-components/typography/s-text';
import { Icon } from './icon';
import { SRangeItem } from '../../market/s-components/s-range-item';
import { SRangeRow } from '../../market/s-components/s-range-row';
import { SBox } from '../s-components/layout/s-box';
import { Touchable } from './touchable';
import { SRow } from '../s-components/layout/s-row';
import { SOptionTitle } from '../s-components/s-option-title';

type TProps = {
  selected: boolean;
  label: {
    title: string;
    date: string;
  };
  onRangePress: () => void;
};

export const RangeOption: React.FC<TProps> = props => {
  const { selected, label, onRangePress } = props;
  const [pressed, setPressed] = useState(false);

  return (
    <Touchable
      testID="range-option"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={onRangePress}
    >
      <SRangeItem>
        <SRangeRow pressed={pressed}>
          <SOptionTitle color="richBlack">{label.title}</SOptionTitle>
          <SRow>
            <SText mt={2} color="romanPurple">
              {label.date}
            </SText>
            <SBox width={22} ml={16}>
              {selected ? (
                <Icon
                  name="check-on-boarding"
                  size={22}
                  color="wildStrawberry"
                />
              ) : null}
            </SBox>
          </SRow>
        </SRangeRow>
      </SRangeItem>
    </Touchable>
  );
};