import { Fragment, forwardRef } from 'react';
import { UseQueryResult } from 'react-query';

import { AxiosResponse } from 'axios';
import {
  IconEye,
  IconInfoCircle,
  IconMessage,
  IconThumbUp,
} from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { InsightsSummaryResponse, InsightsTypes } from 'src/types/posts';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import InsightsCardContainer from './InsightsCardContainer';

type Summary = {
  title: string;
  info?: string;
  Icon: typeof IconEye;
  iconColor: 'primary' | 'highlight' | 'warning';
  alignItems: 'start' | 'center' | 'end';
  count: number;
};

export type InsightsSummaryProps = {
  insightSummaryQuery: UseQueryResult<
    AxiosResponse<InsightsSummaryResponse, any>,
    unknown
  >;
  downloadProps: {
    onDownloadSummary: () => void;
    isDownloadingSummary: boolean;
  };
};

const InsightsSummary = forwardRef<typeof Box, InsightsSummaryProps>(
  function InsightsSummaryComponent(props, ref) {
    const { insightSummaryQuery, downloadProps } = props;

    const { t } = useTranslation('post');
    const { data, isLoading } = insightSummaryQuery;

    const summaryByType: Record<InsightsTypes, Summary> = {
      [InsightsTypes.VIEWERS]: {
        title: t('viewers'),
        info: t('viewers_info'),
        Icon: IconEye,
        iconColor: 'highlight',
        alignItems: 'start',
        count: data?.data?.viewerCount ?? 0,
      },
      [InsightsTypes.REACTIONS]: {
        title: t('post:reactions'),
        info: t('reactions_info'),
        Icon: IconThumbUp,
        iconColor: 'primary',
        alignItems: 'center',
        count: data?.data?.reactionCount ?? 0,
      },
      [InsightsTypes.COMMENTS]: {
        title: t('post:comments'),
        info: t('comments_info'),
        Icon: IconMessage,
        iconColor: 'warning',
        alignItems: 'end',
        count: data?.data?.commentCount ?? 0,
      },
    };

    const { onDownloadSummary, isDownloadingSummary } = downloadProps;
    return (
      <InsightsCardContainer
        title={t('summary')}
        onDownload={onDownloadSummary}
        isDownloadingReport={isDownloadingSummary}
        ref={ref}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          {Object.values(InsightsTypes).map(insightType => {
            const { title, info, Icon, iconColor, alignItems, count } =
              summaryByType[insightType];

            return (
              <Fragment key={insightType}>
                <Stack
                  sx={{
                    width: '280px',
                    justifyContent: 'center',
                    alignItems: alignItems,
                    pr: 2,
                  }}
                >
                  {isLoading && (
                    <Stack sx={{ width: '100%', gap: 1 }}>
                      <HuSkeleton />
                      <HuSkeleton />
                    </Stack>
                  )}
                  {!isLoading && (
                    <Stack sx={{ gap: 1 }}>
                      <Stack
                        sx={theme => ({
                          flexDirection: 'row',
                          alignItems: 'center',
                          gap: 1,
                          [theme.breakpoints.down('md')]: {
                            flexDirection: 'column',
                          },
                        })}
                      >
                        <HuAvatar
                          Icon={Icon}
                          color={iconColor}
                        />
                        <Typography
                          variant="globalS"
                          color={theme =>
                            theme.palette.new.text.neutral.lighter
                          }
                        >
                          {title}
                        </Typography>
                        <HuTooltip
                          description={info}
                          direction="bottom"
                        >
                          <IconInfoCircle size={16} />
                        </HuTooltip>
                      </Stack>
                      <Stack
                        sx={theme => ({
                          flexDirection: 'row',
                          width: '40px',
                          alignItems: 'center',
                          [theme.breakpoints.down('md')]: {
                            alignItems: 'start',
                          },
                        })}
                      >
                        <Typography
                          variant="globalXL"
                          fontWeight="fontWeightBold"
                          color={theme =>
                            theme.palette.new.text.neutral.default
                          }
                        >
                          {count}
                        </Typography>
                      </Stack>
                    </Stack>
                  )}
                </Stack>
                <Divider
                  orientation="vertical"
                  flexItem
                  sx={{
                    borderColor: theme =>
                      theme.palette.new.background.layout.default,
                    '&:last-child': {
                      display: 'none',
                    },
                  }}
                />
              </Fragment>
            );
          })}
        </Stack>
      </InsightsCardContainer>
    );
  },
);

export default InsightsSummary;