import React, { useState } from 'react';
import { Touchable } from '../../common/components/touchable';
import { SPopupSelectorItem } from '../../common/s-components/popup-selector/s-popup-selector-item';
import { SPopupFilterRow } from '../../search/s-components/s-popup-filter-row';
import { SBox } from '../../common/s-components/layout/s-box';
import { Checkbox } from '../../common/components/checkbox';
import { SPopupSelectorLabel } from '../../common/s-components/popup-selector/s-popup-selector-label';

type TProps = {
  label: string;
  value: string;
  selected: boolean;
  onSelect: (value: string) => void;
};

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

  return (
    <Touchable
      testID="popup-filter-option"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={() => {
        onSelect(value);
      }}
    >
      <SPopupSelectorItem>
        <SPopupFilterRow pressed={pressed} justify-content="flex-start">
          <SBox mr={16}>
            <Checkbox
              onPress={() => {
                onSelect(value);
              }}
              checked={selected}
            />
          </SBox>
          <SPopupSelectorLabel color="richBlack">{label}</SPopupSelectorLabel>
        </SPopupFilterRow>
      </SPopupSelectorItem>
    </Touchable>
  );
};