import { type FC } from 'react';

import Tooltip from '@design-system/Tooltip';
import {
  AccordionDetails,
  IconButton,
  Link,
  Accordion as MuiAccordion,
  AccordionSummary as MuiAccordionSummary,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';
import { IconArrowRight, IconChevronDown } from '@tabler/icons-react';

import { useOverflowed } from '../../../hooks/useOverflowed';
import MenuList from '../../composed-components/MenuList';
import Avatar from '../Avatar';
import Pills from '../Pills';

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

const Accordion: FC<AccordionProps> = ({
  title,
  caption = '',
  description = '',
  avatar = null,
  pill,
  textDetail = null,
  customDetail = null,
  sx = {},
  menuList,
  hasPadding = true,
  withTitleEllipsis = false,
  action,
  slotProps,
  ...accordionProps
}) => {
  const { palette } = useTheme();
  const { overflowed: isTitleOverflowed, ref: titleRef } = useOverflowed();

  return (
    <MuiAccordion
      sx={{
        borderRadius: '8px',
        '&:before': {
          backgroundColor: 'transparent',
        },
        color: palette.new.text.neutral.default,
        backgroundColor: hasPadding
          ? palette.new.background.elements.default
          : 'transparent',
        ...sx,
      }}
      disableGutters
      {...accordionProps}
    >
      <MuiAccordionSummary
        className="accordion-summary"
        sx={{
          p: hasPadding ? 2 : 0,
          minHeight: 'auto',
          m: 0,
          gap: 1,
          '& .MuiAccordionSummary-content': {
            margin: 0,
            ...(withTitleEllipsis && { overflow: 'hidden' }),
          },
          '& .MuiAccordionSummary-expandIconWrapper': {
            color: 'inherit',
          },
        }}
        expandIcon={<IconChevronDown className="accordion-collapse-icon" />}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            width: '100%',
            alignItems: 'center',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 1,
              width: 'inherit',
              alignItems: 'inherit',
              ...(withTitleEllipsis && { overflow: 'hidden' }),
            }}
          >
            {avatar && <Avatar {...avatar} />}
            <Stack
              sx={{ mr: 1, ...(withTitleEllipsis && { overflow: 'hidden' }) }}
            >
              {caption && (
                <Typography
                  variant="globalXXS"
                  fontWeight="regular"
                  color={palette.new.text.neutral.lighter}
                >
                  {caption}
                </Typography>
              )}
              <Tooltip
                description={title}
                disableTooltip={!isTitleOverflowed || !withTitleEllipsis}
              >
                <Typography
                  ref={titleRef}
                  variant="globalS"
                  fontWeight="semiBold"
                  color={palette.new.text.neutral.default}
                  sx={{
                    ...(withTitleEllipsis && {
                      whiteSpace: 'nowrap',
                      textOverflow: 'ellipsis',
                      overflow: 'hidden',
                    }),
                    ...slotProps?.title?.sx,
                  }}
                >
                  {title}
                </Typography>
              </Tooltip>
              {description && (
                <Typography
                  variant="globalXS"
                  fontWeight="regular"
                  color={palette.new.text.neutral.lighter}
                >
                  {description}
                </Typography>
              )}
            </Stack>
          </Stack>

          <Stack sx={{ gap: 1, flexDirection: 'row', alignItems: 'center' }}>
            {pill && <Pills {...pill} />}
            {action && <IconButton {...action} />}
            {menuList && <MenuList {...menuList} />}
          </Stack>
        </Stack>
      </MuiAccordionSummary>
      <AccordionDetails
        sx={{ p: 0 }}
        className="accordion-details"
      >
        {!textDetail && (
          <Stack
            className="accordion-details-custom-detail"
            sx={{ p: hasPadding ? 2 : 0, pt: 0 }}
          >
            {customDetail}
          </Stack>
        )}
        {textDetail && (
          <Stack
            sx={{
              px: hasPadding ? 2 : 0,
              pb: hasPadding ? 2 : 0,
              gap: 1,
            }}
          >
            <Typography
              variant="globalS"
              fontWeight="regular"
              color={palette.new.text.neutral.lighter}
            >
              {textDetail.description}
            </Typography>
            <Link
              sx={{
                color: palette.new.action.button.background.primary.default,
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.5,
              }}
              href={textDetail.link}
            >
              {textDetail.label}
              <IconArrowRight
                size="1em"
                color={palette.new.action.button.background.primary.default}
              />
            </Link>
          </Stack>
        )}
      </AccordionDetails>
    </MuiAccordion>
  );
};

export type { AccordionProps };

export default Accordion;