import React, { useCallback, memo } from 'react';
import { SMarketRow } from '../s-components/s-market-row';
import { Icon } from '../../common/components/icon';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SText } from '../../common/s-components/typography/s-text';
import { TMarket } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { ToggleStyled } from '../../common/components/toggle-styled';
import { checkIsLight, getMarketFragments } from '../transducers';
import { TLightMarketVariant, TSetActive } from '../types';
import { Checkbox } from '../../common/components/checkbox';
import { MARKET_VARIANT_PARAMS, TOP_MARKETS_AS_STRING } from '../constants';
import { STopMarketsRow } from '../s-components/s-top-markets-row';
import { SNotificationsMarketName } from '../s-components/s-notifications-market-name';
import { SMarketName } from '../s-components/s-market-name';

export type TProps = {
  onPress: TSetActive;
  selected?: string;
  market: TMarket;
  marketVariant: string;
  index: number;
};

export const Row: React.FC<TProps> = memo(props => {
  const { selected, market, marketVariant, onPress } = props;
  const isMulti = marketVariant === MARKET_VARIANT_PARAMS.notificationSettings;
  const isActive = !isMulti && market.code === selected;
  const fragments = isMulti ? getMarketFragments(selected) : undefined;
  const isMultiActive = isMulti && _.includes(market.code, fragments);
  const lightVariant = checkIsLight(marketVariant as TLightMarketVariant);
  const nameColor = lightVariant ? 'richBlack' : 'white';
  const home = _.path('home', market);
  const marketShortName = _.path('short_name', market);
  const cssRules = {
    px: 16,
  };
  const disabledSelection = selected!.split(',').length === 10;

  const onPressCallback = useCallback(() => {
    const isMulti =
      marketVariant === MARKET_VARIANT_PARAMS.notificationSettings;
    onPress(market.code, { isMulti });
  }, [onPress, market, marketVariant]);

  const getBgColor = useCallback(
    (state: boolean) => {
      const lightVariant = checkIsLight(marketVariant as TLightMarketVariant);
      const defaultColor = lightVariant ? 'white' : 'ebonyClay';
      const pressedColor = lightVariant ? 'athensGray2' : 'mirage';

      return state ? pressedColor : defaultColor;
    },
    [marketVariant]
  );

  return (
    <ToggleStyled
      testID="market-selector-toggle-row"
      {...cssRules}
      onPress={onPressCallback}
      tappedCss={{
        opacity: 1,
        backgroundColor: getBgColor(!(!isMultiActive && disabledSelection)),
      }}
      defaultCss={{ opacity: 1, backgroundColor: getBgColor(false) }}
    >
      <>
        {market.code === TOP_MARKETS_AS_STRING ? (
          <STopMarketsRow variant={marketVariant}>
            <SBox>
              <SMarketName color={nameColor}>{marketShortName}</SMarketName>
              <SBox mt={5}>
                <SText fontSize={10} color="romanPurple" uppercase>
                  {market.name}
                </SText>
              </SBox>
            </SBox>

            {isActive ? (
              <Icon
                name="check-on-boarding"
                size={22}
                color="wildStrawberry"
                mr={-1}
                mt={4}
              />
            ) : null}
          </STopMarketsRow>
        ) : null}

        {market.code !== TOP_MARKETS_AS_STRING ? (
          <SMarketRow variant={marketVariant}>
            <SRow top={-1}>
              {marketVariant === MARKET_VARIANT_PARAMS.notificationSettings ? (
                <SBox mr={16}>
                  <Checkbox
                    onPress={onPressCallback}
                    checked={isMultiActive}
                    disabled={disabledSelection}
                  />
                </SBox>
              ) : null}
              {home ? (
                <Icon
                  mr={8}
                  name="home-2"
                  size={22}
                  color="lavenderGray"
                  opacity={disabledSelection ? 0.5 : 1}
                />
              ) : null}
              <SBox>
                <SBox>
                  {marketVariant ===
                  MARKET_VARIANT_PARAMS.notificationSettings ? (
                    <SNotificationsMarketName
                      color={nameColor}
                      style={{
                        opacity: disabledSelection && !isMultiActive ? 0.5 : 1,
                      }}
                    >
                      {marketShortName}
                    </SNotificationsMarketName>
                  ) : (
                    <SMarketName
                      color={nameColor}
                      style={{
                        opacity: disabledSelection && !isMultiActive ? 0.5 : 1,
                      }}
                    >
                      {marketShortName}
                    </SMarketName>
                  )}
                </SBox>
              </SBox>
            </SRow>
            {isActive ? (
              <Icon
                name="check-on-boarding"
                size={22}
                color="wildStrawberry"
                mr={-1}
              />
            ) : null}
          </SMarketRow>
        ) : null}
      </>
    </ToggleStyled>
  );
});

Row.defaultProps = {
  selected: '',
};