import { useState } from 'react';

import ButtonGroup from '@design-system/ButtonGroup';
import Dropdown from '@design-system/Dropdown';
import InputSearch from '@design-system/Inputs/Search';
import MenuItem from '@design-system/Menu/components/MenuItem';
import Title from '@design-system/Title';
import { Card, Stack } from '@mui/material';

import { SortFilter } from '../../../types';
import ParticipationList from '../ParticipationList';

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

const ParticipationDashboard = ({
  segments,
  selectedSegment,
  onSegmentChange,
  showSort = false,
  sortOrder,
  onSortChange,
  showSearch = false,
  searchQuery = '',
  onSearchChange,
  items,
  isLoading = false,
  isPreviousData = false,
  renderChildren,
  noDataMessage,
  emptyState,
  formatRatioLabel,
  paginationController,
  labels,
}: ParticipationDashboardProps) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Card
      sx={theme => ({
        flexShrink: 0,
        borderRadius: 2,
        border: `1px solid ${theme.palette.new.border.neutral.default}`,
      })}
    >
      <Stack sx={{ gap: 'inherit' }}>
        <Stack
          sx={theme => ({
            padding: 3,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderTopLeftRadius: theme.spacing(1),
            borderTopRightRadius: theme.spacing(1),
          })}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <Title
              variant="M"
              title={labels.showBy}
            />
            <Dropdown
              label={selectedSegment?.title ?? labels.showBy}
              buttonVariant="secondary"
              open={isOpen}
              onOpen={() => setIsOpen(true)}
              onClose={() => setIsOpen(false)}
            >
              {segments.map(segment => (
                <MenuItem
                  key={`${segment.type}-${segment.id}`}
                  selected={
                    segment.id === selectedSegment?.id &&
                    segment.type === selectedSegment?.type
                  }
                  onClick={() => {
                    onSegmentChange(segment);
                    setIsOpen(false);
                  }}
                >
                  {segment.title}
                </MenuItem>
              ))}
            </Dropdown>
          </Stack>

          {showSort && (
            <ButtonGroup
              labels={[labels.ascending, labels.descending]}
              value={sortOrder === SortFilter.ASC ? 0 : 1}
              onChange={index => {
                if (index !== null)
                  onSortChange(index === 0 ? SortFilter.ASC : SortFilter.DESC);
              }}
            />
          )}
        </Stack>

        <Stack sx={{ gap: 3, px: 3, pb: 3 }}>
          {showSearch && onSearchChange && (
            <InputSearch
              variant="custom"
              fullWidth
              placeholder={labels.searchPlaceholder}
              value={searchQuery}
              onChange={onSearchChange}
              showClear
            />
          )}

          <ParticipationList
            items={items}
            isLoading={isLoading}
            isPreviousData={isPreviousData}
            noDataMessage={noDataMessage}
            emptyState={emptyState}
            formatRatioLabel={formatRatioLabel}
            renderChildren={renderChildren}
          />

          {paginationController}
        </Stack>
      </Stack>
    </Card>
  );
};

export default ParticipationDashboard;
