import BadgeCountButton from '@composed-components/BadgeCountButton';
import Button from '@design-system/Buttons/Button';
import Title from '@design-system/Title';
import { Skeleton } from '@mui/material';
import Stack from '@mui/material/Stack';
import { IconFilter } from '@tabler/icons-react';
import { fadeIn } from '@utils/animations';

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

const SurveyResultsLayout = ({
  children,
  title,
  disableFilters = false,
  filtersLabel = 'Filters',
  clearFiltersLabel = 'Clear Filters',
  onClearFilters,
  filtersCount = 0,
  onClickFilters,
  loading = false,
  extraActions,
  ...props
}: SurveyResultsLayoutProps) => {
  return (
    <Stack
      {...props}
      sx={{
        width: '100%',
        height: '100%',
        animation: `${fadeIn} 150ms ease-in-out backwards`,
        backgroundColor: theme => theme.palette.new.background.layout.default,
        ...props.sx,
      }}
    >
      <Stack
        sx={{
          backgroundColor: theme =>
            theme.palette.new.background.elements.default,
          px: 3,
          py: 1.5,
          boxShadow: theme =>
            `-1px 4px 8px 0px ${theme.palette.new.shadows['8dp']}`,
          justifyContent: 'space-between',
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          zIndex: 1,
          height: 64,
          boxSizing: 'border-box',
        }}
      >
        {loading && (
          <>
            <Skeleton
              width={280}
              height={34}
              variant="rounded"
            />
            <Stack sx={{ flexDirection: 'row', gap: 1 }}>
              <Skeleton
                width={140}
                height={34}
                variant="rounded"
              />
              <Skeleton
                width={140}
                height={34}
                variant="rounded"
              />
            </Stack>
          </>
        )}
        {!loading && (
          <>
            <Title
              title={title}
              variant="L"
              sx={{ flex: 1 }}
            />
            {extraActions}
            {!disableFilters && (
              <>
                <BadgeCountButton
                  count={filtersCount}
                  buttonProps={{
                    variant: 'secondary',
                    startIcon: <IconFilter />,
                    onClick: onClickFilters,
                  }}
                >
                  {filtersLabel}
                </BadgeCountButton>
                <Button
                  variant="tertiary"
                  onClick={onClearFilters}
                  disabled={filtersCount === 0}
                >
                  {clearFiltersLabel}
                </Button>
              </>
            )}
          </>
        )}
      </Stack>
      {children}
    </Stack>
  );
};

export default SurveyResultsLayout;
