import { type FC } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import { IconChevronRight } from '@material-hu/icons/tabler';
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 { type Channel } from 'src/pages/dashboard/Conversations/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ShowMoreText from 'src/components/text/ShowMoreText';

import EditDescription from './EditDescription';

type EditDescriptionButtonProps = {
  isAdmin: boolean;
  conversation: Channel | undefined;
};

const EditDescriptionButton: FC<EditDescriptionButtonProps> = props => {
  const { conversation, isAdmin } = props;
  const description = conversation?.purpose?.value;
  const theme = useTheme();
  const { t } = useLokaliseTranslation('chat');
  const hideAddDescription = !isAdmin && !conversation?.purpose?.value;

  const {
    modal: editDescriptionModal,
    showModal: showEditDescriptionModal,
    closeModal: closeEditDescriptionModal,
  } = useModal(
    EditDescription,
    { fullWidth: true, maxWidth: 'sm' },
    {
      onClose: () => closeEditDescriptionModal(),
      title: t('description.title'),
      description,
      conversation,
    },
  );

  const handleClick = () => {
    showEditDescriptionModal();
  };

  if (hideAddDescription) return null;

  return (
    <>
      {editDescriptionModal}
      <HuCardContainer
        sx={{ overflow: 'visible', mb: 1, mt: 2 }}
        onClick={isAdmin ? handleClick : undefined}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {description ? (
            <Stack sx={{ width: '100%' }}>
              <ShowMoreText
                variant="globalXS"
                text={description}
                lines={3}
                onlyButtonText
                buttonProps={{
                  sx: {
                    p: 0,
                    minWidth: 0,
                  },
                }}
              />
            </Stack>
          ) : (
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('description.add')}
            </Typography>
          )}
          {isAdmin && (
            <IconChevronRight color={theme.palette.new.text.neutral.default} />
          )}
        </Stack>
      </HuCardContainer>
    </>
  );
};

export default EditDescriptionButton;