import React, { memo, useState } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';
import { theme } from '../../app/theme';
import { Icon } from '../../common/components/icon';
import { Touchable } from '../../common/components/touchable';

type TProps = {
  disabled?: boolean;
  onClear?: () => void;
};

export const ClearMarketTag: React.FC<TProps> = memo(props => {
  const { disabled, onClear } = props;
  const [pressed, setPressed] = useState(false);

  const renderClickable = () => {
    return (
      <Touchable
        testID="clear-market-tag"
        onPress={onClear}
        onPressIn={() => {
          setPressed(true);
        }}
        onPressOut={() => {
          setPressed(false);
        }}
      >
        <SBox
          width={32}
          height={32}
          bg={pressed ? theme.colors.mirage : theme.colors.ebonyClay}
          borderRadius={32}
          alignItems="center"
          justifyContent="center"
        >
          <Icon
            name="cross"
            color={theme.colors.lavenderGray}
            size={12}
            opacity={pressed ? 0.7 : 1}
          />
        </SBox>
      </Touchable>
    );
  };

  const renderDisabled = () => {
    return (
      <SBox
        width={32}
        height={32}
        bg={theme.colors.pickledBluewood}
        borderRadius={32}
        alignItems="center"
        justifyContent="center"
      >
        <Icon name="cross" color={theme.colors.stormGray} size={8} />
      </SBox>
    );
  };

  const renderLabel = () => {
    return (
      <SBox mt={3} alignItems="center" opacity={disabled ? 0.5 : 1}>
        <SText fontSize={12}>Clear</SText>
      </SBox>
    );
  };

  return (
    <SBox pt={6}>
      {disabled ? (
        <>
          {renderDisabled()}
          {renderLabel()}
        </>
      ) : (
        <>
          {renderClickable()}
          {renderLabel()}
        </>
      )}
    </SBox>
  );
});

ClearMarketTag.defaultProps = {
  disabled: false,
  onClear: () => {},
};