import { useState } from 'react';

import type { ReactNode } from 'react';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import { useScroller } from '~/src/components/Scroller2';
import Text from '~/src/components/Text';
import useTheme from '~/src/hooks/useTheme';
import { useI18n } from '~/src/lib/i18n';
import { raf } from '~/src/lib/utils/raf';
import toShortNumber from '~/src/lib/utils/toShortNumber';

const HorizontalBarChart = ({
  total,
  items,
  metric = 'visits',
}: {
  total: number;
  metric?: 'visits' | 'clicks' | 'presaves' | 'unlocks';
  items: {
    label: ReactNode;
    total: number;
    detailText: string;
    color?: string;
  }[];
}) => {
  const { t } = useI18n('dashboard');
  const [isExpanded, setIsExpanded] = useState(false);
  const scroller = useScroller();
  const TOTAL_VISIBLE_ITEMS = 5;
  const showExpandButton = items.length > TOTAL_VISIBLE_ITEMS;
  const theme = useTheme();

  return (
    <Box tag="ul">
      {items
        .slice(0, isExpanded ? undefined : TOTAL_VISIBLE_ITEMS)
        .map(
          ({ total: itemTotal, label, detailText, color = '#666' }, index) => {
            const percent = (itemTotal / total) * 100;
            // const percentString = percent.toFixed(percent < 1 ? 2 : 1);

            return (
              <li
                key={detailText}
                title={detailText}
                style={{
                  marginTop: index ? '0.3em' : undefined,
                  height: 42,
                  position: 'relative',
                  borderRadius: 3,
                  border: 'solid 1px #333',
                  background: '#070707',
                }}
              >
                <div
                  style={{
                    width: percent + '%',
                    height: '100%',
                    background: color,
                    opacity: 0.25,
                  }}
                />
                <Box
                  flexRow
                  fullHeight
                  alignCenter
                  coverParent
                  padding="0 0.5em"
                >
                  <Box
                    flexGrow
                    flexRow
                    alignCenter
                    style={{ color: theme.textColor80 }}
                  >
                    {label}
                  </Box>
                  <Text color={theme.textColor40} size="0.9em">
                    {t(metric, { count: toShortNumber(itemTotal) })}
                  </Text>
                </Box>
              </li>
            );
          }
        )}
      {showExpandButton && (
        <Clickable
          onClick={() => {
            const prevScrollTop = scroller!.getScrollTop();
            setIsExpanded(!isExpanded);

            raf(() => scroller!.setScrollTop(prevScrollTop!));
          }}
          margin="1em"
        >
          <Text isBold centered color={theme.textColor80} size="1em">
            {isExpanded ? t('labels.showLess') : t('labels.showMore')}
          </Text>
        </Clickable>
      )}
    </Box>
  );
};

export default HorizontalBarChart;