import React, { memo, useEffect } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { theme } from '../../../app/theme';
import { Icon } from '../../../common/components/icon';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH2 } from '../../../common/s-components/typography/s-h2';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { MarketRow } from '../../../common/components/top-markets-widget/market-row';
import { TMarketData } from '../../types';

type TProps = {
  dateRange: string;
  data: TMarketData[];
};

export const MarketsPopup: React.FC<TProps> = memo(props => {
  const { dateRange, data } = props;
  const colors = {
    value: theme.colors.black,
    percent: theme.colors.black,
    barLine: theme.gradients.marketsGraphs.variant2.bg,
    percentLine: theme.gradients.marketsGraphs.variant2.fg,
    flagName: theme.colors.eastBay,
  };

  useEffect(() => {}, []);

  return (
    <SBox pt={3} pb={5}>
      <SRow px={16} justifyContent="space-between">
        <SBox>
          <SH2 color="black" mb={6}>
            Top 15 Markets
          </SH2>
          <SH6 color="romanPurple">{dateRange}</SH6>
        </SBox>
        <Icon mt={9} mr={1} name="youtube" size={26} color="lavenderGray" />
      </SRow>
      <SBox mt={22} mb={24} width={1} height={1} bg={theme.colors.snuff} />
      <SBox px={16}>
        {data.map(o => {
          return (
            <MarketRow
              variant="popup"
              colors={colors}
              key={o.market}
              item={o}
            />
          );
        })}
      </SBox>
    </SBox>
  );
});