import React, { useState } from 'react';
import { SPopupSelectorItem } from '../../s-components/popup-selector/s-popup-selector-item';
import { Icon } from '../icon';
import { SPopupSelectorRow } from '../../s-components/popup-selector/s-popup-selector-row';
import { NSelect } from '../../types';
import { SPopupSelectorLabel } from '../../s-components/popup-selector/s-popup-selector-label';
import { Touchable } from '../touchable';

type TProps = {
  selected: boolean;
  label: string;
  renderLabelExtra?: (props: Record<string, any>) => React.ReactElement;
  value: NSelect.TValue;
  onSelect: (value: string) => void;
  extraProps: any;
};

export const PopupSelectorOption = (props: TProps) => {
  const {
    selected,
    label,
    value,
    onSelect,
    renderLabelExtra,
    extraProps,
  } = props;
  const [pressed, setPressed] = useState(false);
  return (
    <Touchable
      testID="popup-select-option"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={() => {
        onSelect(value as string);
      }}
    >
      <SPopupSelectorItem>
        <SPopupSelectorRow pressed={pressed}>
          <SPopupSelectorLabel color="richBlack">{label}</SPopupSelectorLabel>
          {renderLabelExtra ? renderLabelExtra(extraProps) : null}
          {selected ? (
            <Icon name="check-on-boarding" size={22} color="wildStrawberry" />
          ) : null}
        </SPopupSelectorRow>
      </SPopupSelectorItem>
    </Touchable>
  );
};

PopupSelectorOption.defaultProps = {};