import React, { useCallback, useState } from 'react';
import { GestureResponderEvent } from 'react-native';
import { SBox } from '../s-components/layout/s-box';
import { SRow } from '../s-components/layout/s-row';
import { SButtonTitle } from '../s-components/s-button-title';
import { Flag } from './flag';
import { getMarketCode, getPillBgColor } from '../transducers';
import { TGetPillBgColorVariant, TMarketsAssoc } from '../types';
import { Touchable } from './touchable';
import { SText } from '../s-components/typography/s-text';
import { fp as _ } from '../utils/fp';
import { withMarkets } from '../hoc/with-markets';
import { SPillContainer } from '../s-components/s-pill-container';

type TProps = {
  label: string;
  marketCode?: string;
  disabled?: boolean;
  noTouchable?: boolean;
  variant?: TGetPillBgColorVariant;
  onPress?: (event: GestureResponderEvent) => void;
  // testID?: string;
  capitalize?: boolean;
  flagMarginTop?: number;
  marketNameVariant?: 'code' | 'short_name';
  marketsAssoc: TMarketsAssoc;
};

const PillComponent: React.FC<TProps> = props => {
  const {
    variant,
    noTouchable,
    onPress,
    disabled,
    marketCode,
    marketNameVariant,
    marketsAssoc,
    label,
    capitalize,
    flagMarginTop,
  } = props;
  const [pressed, setPressed] = useState(false);
  const bgColor = getPillBgColor(variant!, pressed);

  const getMarketName = useCallback(() => {
    if (marketCode === 'empty') return 'empty';

    return _.path<any, any>(
      [marketCode!, marketNameVariant],
      marketsAssoc
    ) as string;
  }, [marketCode, marketNameVariant, marketsAssoc]);

  const renderContent = useCallback(() => {
    const market =
      marketNameVariant === 'code'
        ? getMarketCode(marketCode)
        : getMarketName();
    const isMarket = _.isNotEmpty(market);
    const isGlobal = marketCode === '_gl';
    const marketLabel =
      isMarket && label ? `${label} ` : isMarket ? `${label}` : `N/A `;
    const hasMarket = marketCode !== 'empty';
    return (
      <>
        <SBox
          mr={hasMarket ? 3 : 0}
          style={{
            transform: [{ translateX: -3 }, { translateY: capitalize ? 1 : 0 }],
          }}
        >
          {hasMarket ? (
            <SBox opacity={disabled ? 0.7 : 1}>
              <Flag
                market={marketCode}
                width={16}
                height={16}
                marginTop={flagMarginTop}
                variant="white"
              />
            </SBox>
          ) : null}
        </SBox>
        {capitalize ? (
          <SText medium>
            {hasMarket ? (
              <SText
                medium
                textTransform={isGlobal ? 'capitalize' : 'uppercase'}
              >
                {`${market} `}
              </SText>
            ) : null}
            {marketLabel}
          </SText>
        ) : (
          <SButtonTitle
            color={
              disabled && hasMarket ? 'logan' : disabled ? 'kimberly' : 'white'
            }
          >
            {hasMarket ? `${market} ` : ''}
            {marketLabel}
          </SButtonTitle>
        )}
      </>
    );
  }, [
    marketCode,
    label,
    capitalize,
    flagMarginTop,
    marketNameVariant,
    disabled,
  ]);

  return noTouchable ? (
    <SRow>{renderContent()}</SRow>
  ) : (
    <Touchable
      disabled={disabled}
      testID="pill"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={onPress}
    >
      <SPillContainer bgColor={bgColor}>{renderContent()}</SPillContainer>
    </Touchable>
  );
};

PillComponent.defaultProps = {
  variant: 'primary',
  flagMarginTop: 0,
  marketNameVariant: 'code',
};

export const Pill = _.compose(withMarkets)(PillComponent);