import Skeleton from '@design-system/Skeleton';
import { Stack } from '@mui/material';

import { type PieSkeletonProps } from './types';

const PieSkeleton = ({
  sx,
  copetin,
  title,
  description,
  legend = 'none',
}: PieSkeletonProps) => {
  const showTitle = copetin || title || description;

  const getChartContainerDirection = () => {
    if (legend === 'right') return 'row-reverse';
    if (legend === 'left') return 'row';
    if (legend === 'top') return 'column';
    if (legend === 'bottom') return 'column-reverse';
    return undefined;
  };

  const getChartContainerGap = () => {
    if (legend === 'top' || legend === 'bottom') return 1;
    if (legend === 'left' || legend === 'right') return 3;
    return undefined;
  };

  const getLegendDirection = () => {
    if (legend === 'top' || legend === 'bottom') return 'row';
    if (legend === 'left' || legend === 'right') return 'column';
    return undefined;
  };

  const getChartSize = () => {
    if (legend === 'left' || legend === 'right') return 144;
    return 175;
  };

  return (
    <Stack
      className="PieSkeleton-root"
      sx={{
        alignItems: 'center',
        gap: 2,
        ...sx,
      }}
    >
      <Stack
        sx={{
          flexDirection: getChartContainerDirection(),
          gap: getChartContainerGap(),
          alignItems: 'center',
          jusitfyContent: 'center',
        }}
      >
        {legend !== 'none' && (
          <Stack
            sx={{
              flexDirection: getLegendDirection(),
              justifyContent: 'center',
              alignItems: 'center',
              gap: 0.5,
            }}
          >
            {Array.from({ length: 3 }, (_, index) => (
              <Skeleton
                key={index}
                height={20}
                width={70}
              />
            ))}
          </Stack>
        )}
        <Skeleton
          variant="circular"
          width={getChartSize()}
          height={getChartSize()}
        />
      </Stack>
      {showTitle && (
        <Stack sx={{ gap: 0.5, alignItems: 'center' }}>
          {copetin && (
            <Skeleton
              height={16}
              width={100}
            />
          )}
          {title && (
            <Skeleton
              height={24}
              width={200}
            />
          )}
          {description && (
            <Skeleton
              height={20}
              width={100}
            />
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default PieSkeleton;