import React, { useState } from 'react';
// import { TGetPillBgColorVariant } from '../../common/types';
import { Touchable } from '../../common/components/touchable';
import { SBox } from '../../common/s-components/layout/s-box';
import { SPillLabel } from '../s-components/s-pill-label';

type TProps = {
  label: string;
  value: number;
  // marketCode?: string;
  active?: boolean;
  // variant?: TGetPillBgColorVariant;
  onCategoryChange: (value: any) => void;
  // testID?: string;
  // capitalize?: boolean;
  // flagMarginTop?: number;
};

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

  const renderPill = () => {
    const bgColor = active
      ? 'wildStrawberry'
      : pressed
      ? 'athensGray4'
      : 'athensGray2';
    const labelColor = active ? 'white' : 'black';
    return (
      <SBox
        height={32}
        borderRadius={16}
        bg={bgColor}
        py={8}
        pl={12}
        pr={12}
        mb={12}
        mr={16}
      >
        <SPillLabel color={labelColor}>{label}</SPillLabel>
      </SBox>
    );
  };

  return active ? (
    renderPill()
  ) : (
    <Touchable
      testID="category-pill"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={() => {
        onCategoryChange(value);
      }}
    >
      {renderPill()}
    </Touchable>
  );
};