import { forwardRef } from 'react';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import DonutChart from '@material-hu/components/design-system/Charts/DonutChart';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import { type LiveStreamStats } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

type PlatformDataProps = {
  platformData: Partial<Pick<LiveStreamStats, 'viewers' | 'totalViewers'>>;
  isLoadingStats: boolean;
};

const PlatformChart = forwardRef<HTMLDivElement, PlatformDataProps>(
  function PlatformChart({ platformData, isLoadingStats }, ref) {
    const { t } = useLokaliseTranslation('livestream');
    const theme = useTheme();
    const { viewers, totalViewers } = platformData;
    const { mobile = 0, web = 0 } = viewers || {};

    const series = [mobile, web];
    const colors = [
      theme.palette.new.graphics.info[400],
      theme.palette.new.graphics.brand[500],
    ];

    const labels = [t('MOBILE_PLATFORM'), t('WEB_PLATFORM')];

    return (
      <Stack ref={ref}>
        <HuCardContainer
          sx={{ p: 1 }}
          fullWidth
        >
          <Stack sx={{ mb: 3 }}>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('PLATFORM_CHART_TITLE')}
            </Typography>
            <Typography variant="globalXS">
              {t('PLATFORM_CHART_DESCRIPTION')}
            </Typography>
          </Stack>
          <Stack
            sx={{
              flexDirection: { xs: 'column', md: 'row' },
              alignItems: 'center',
              justifyContent: 'center',
              gap: 5,
            }}
          >
            <HuSkeleton
              variant="rounded"
              width={280}
              height={280}
              isLoading={isLoadingStats}
            >
              <Stack sx={{ width: 280, height: 280 }}>
                <DonutChart
                  type="doughnut"
                  data={{
                    labels,
                    datasets: [
                      {
                        data: series,
                        backgroundColor: colors,
                      },
                    ],
                  }}
                  options={{
                    maintainAspectRatio: false,
                    plugins: {
                      legend: {
                        display: false,
                      },
                      tooltip: {
                        enabled: false,
                      },
                    },
                  }}
                />
              </Stack>
            </HuSkeleton>

            <HuSkeleton
              variant="rounded"
              width={150}
              height={150}
              isLoading={isLoadingStats}
            >
              <Stack>
                <Typography
                  variant="globalS"
                  color={theme => theme.palette.new.text.neutral.lighter}
                >
                  {t('TOTAL_USERS')}
                </Typography>
                <Typography
                  variant="globalL"
                  fontWeight="fontWeightSemiBold"
                  color={theme => theme.palette.new.text.neutral.default}
                  sx={{ mb: 3 }}
                >
                  {totalViewers}
                </Typography>

                <Stack sx={{ gap: 2 }}>
                  {series.map((value, index) => (
                    <Stack
                      key={index}
                      sx={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        gap: 1.5,
                      }}
                    >
                      <Stack
                        sx={{
                          width: 12,
                          height: 12,
                          borderRadius: '100%',
                          backgroundColor: colors[index],
                        }}
                      />
                      <Typography
                        variant="globalM"
                        color={theme => theme.palette.new.text.neutral.default}
                      >
                        {labels[index]}: {value}%
                      </Typography>
                    </Stack>
                  ))}
                </Stack>
              </Stack>
            </HuSkeleton>
          </Stack>
        </HuCardContainer>
      </Stack>
    );
  },
);

export default PlatformChart;