import React, { ReactElement, useCallback } from 'react';
import { Keyboard } from 'react-native';
import { SBox } from '../s-components/layout/s-box';
import { SRow } from '../s-components/layout/s-row';
import { Flag } from './flag';
import { fp as _ } from '../utils/fp';
import {
  getMarketIndicatorSizes,
  getMarketIndicatorOffset,
  getClickableAreaSize,
} from '../transducers';
import { Portal } from '../utils/portal/portal';
import { InfoMarket } from './info-market';
import { togglePopup } from '../utils/swipeable-popup-service';
import { SwipeablePopup } from './bottom-sheet/swipeable-popup';
import { withMarkets } from '../hoc/with-markets';
import { TMarket, TMarketsAssoc } from '../types';
import { useNanoId } from '../hooks/use-nano';

const flagWidth = 16;
const flagHeight = 16;
const flagPadding = 10;
const flagBorderWidth = 2.3;
const clickableAreaOffset = 10;
const { clickableAreaWidth, clickableAreaHeight } = getClickableAreaSize({
  flagWidth,
  flagHeight,
  flagBorderWidth,
  clickableAreaOffset,
});

type TProps = {
  market: TMarket;
  marketsAssoc: TMarketsAssoc;
  children: ReactElement;
  variant?: string;
  notClickable?: boolean;
  // top?: number;
  // androidTopOffset?: number;
  // maxHeight?: number;
  // minHeight?: number;
  // startYOffset?: number;
  marketMain?: TMarket;
  scrolledScreen?: boolean;
  marketCode?: string;
  pressed: boolean;
};

const WithMarketIndicatorComponent: React.FC<TProps> = props => {
  const {
    market,
    variant,
    marketCode,
    marketsAssoc,
    children,
    scrolledScreen,
    pressed,
    notClickable,
    marketMain,
  } = props;
  const currentMarket = !marketCode ? market : _.path(marketCode, marketsAssoc);
  const marketName = _.path('name', currentMarket);

  const id = useNanoId();

  const onMarketPress = useCallback(() => {
    if (!notClickable) {
      Keyboard.dismiss();
      togglePopup(variant!);
    }
  }, [variant, notClickable]);

  const renderFlag = useCallback(
    (variant?: string) => {
      const { marketCode: code } = props;
      const customMarket = 'marketMain' in props;
      let marketCode =
        code || _.path('code', customMarket ? marketMain : market);

      if (customMarket && !marketMain) return null;

      return (
        <Flag
          market={marketCode}
          width={flagWidth}
          height={flagHeight}
          marginTop={0}
          variant={variant}
        />
      );
    },
    [market, marketMain, marketCode]
  );

  const renderClickableArea = () => {
    const { top, left } = getMarketIndicatorSizes({
      clickableAreaHeight,
      clickableAreaWidth,
      flagHeight,
      flagWidth,
      flagBorderWidth,
    });
    return (
      <SBox
        testID="market-tappable-area"
        width={clickableAreaWidth}
        height={clickableAreaHeight}
        top={top}
        left={left}
        position="absolute"
        zIndex={1}
        onStartShouldSetResponder={onMarketPress}
      />
    );
  };

  const renderHeaderMarket = useCallback(() => {
    const { radius } = getMarketIndicatorSizes({
      clickableAreaHeight,
      clickableAreaWidth,
      flagHeight,
      flagWidth,
      flagBorderWidth,
    });
    const offset = getMarketIndicatorOffset({
      flagWidth,
      flagBorderWidth,
      flagPadding,
    });
    const flagVariant = scrolledScreen ? 'light' : undefined;

    return (
      <SRow justifyContent="center" opacity={pressed ? 0.7 : 1}>
        <SRow alignItems="center" pl={offset}>
          <SBox position="absolute" left={1}>
            <SBox borderRadius={radius} p={flagBorderWidth} bg="white" mt={1}>
              {renderFlag(flagVariant)}
            </SBox>
            {renderClickableArea()}
          </SBox>
          {children}
        </SRow>
      </SRow>
    );
  }, [children, scrolledScreen, pressed]);

  return (
    <>
      <Portal id={`market:${id}`} updateIfAnyChanged={{ marketName }}>
        <SwipeablePopup
          pb={46}
          pt={29}
          variant={variant!}
          content={<InfoMarket market={currentMarket!} />}
        />
      </Portal>
      {renderHeaderMarket()}
    </>
  );
};

WithMarketIndicatorComponent.defaultProps = {
  // children: null,
  variant: 'market',
  notClickable: false,
  // top: 3,
  // androidTopOffset: 2,
};

export const WithMarketIndicator = _.compose(withMarkets)(
  WithMarketIndicatorComponent
);