import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { IconInfoCircle, TablerIcon } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { SxProps, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import { PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  iconsPolicyTypes,
  getLabelByallowanceType,
  getTimeByUnit,
} from 'src/utils/vacations';

import { getPolicyBalanceDetailDrawer } from '../Drawers/PolicyBalanceDetailDrawer';
import { getPolicyDescriptionDrawer } from '../Drawers/PolicyDescriptionDrawer';

export type PolicyTypesItemProps = {
  policyType: PolicyTypes;
  sx?: SxProps;
};

const PolicyTypesItem = (props: PolicyTypesItemProps) => {
  const { policyType, sx } = props;
  const theme = useTheme();

  const { t } = useLokaliseTranslation('time_off');

  const IconPolicyType =
    policyType?.icon && (iconsPolicyTypes[policyType?.icon] as TablerIcon);

  const {
    drawer: policyTypeDetailDrawer,
    showDrawer: showPolicyBalanceDetailDrawer,
  } = useDrawerV2(args =>
    getPolicyBalanceDetailDrawer({ ...args, policyType }),
  );

  const {
    drawer: policyDescriptionDrawer,
    showDrawer: showPolicyDescriptionDrawer,
  } = useDrawerV2(args => getPolicyDescriptionDrawer({ ...args, policyType }));

  const handleShowPolicyDescriptionDrawer = (
    e: React.MouseEvent<HTMLButtonElement>,
  ) => {
    e.stopPropagation();
    showPolicyDescriptionDrawer({});
  };

  return (
    <Stack sx={sx}>
      {policyTypeDetailDrawer}
      {policyDescriptionDrawer}
      <CardContainer
        fullWidth
        hasShadow={theme.palette.mode === 'light'}
        onClick={() => showPolicyBalanceDetailDrawer({})}
        key={policyType?.id.toString()}
      >
        <Stack sx={{ height: 115, justifyContent: 'space-between' }}>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <Typography
              variant="globalS"
              sx={{
                fontWeight: 'fontWeightSemiBold',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                maxWidth: 280,
                display: '-webkit-box',
              }}
            >
              {policyType?.name}
            </Typography>
            {policyType?.description && (
              <Tooltip title={t('show_description')}>
                <IconButton
                  onClick={handleShowPolicyDescriptionDrawer}
                  size="medium"
                  sx={{
                    color: theme.palette.new.text.neutral.lighter,
                    p: 0,
                    alignSelf: 'flex-start',
                  }}
                >
                  <IconInfoCircle />
                </IconButton>
              </Tooltip>
            )}
          </Stack>
          <Stack sx={{ pt: 2 }}>
            <Stack sx={{ flexDirection: 'row', gap: 1 }}>
              {IconPolicyType && (
                <IconPolicyType
                  width="30px"
                  height="30px"
                  color={theme.palette.new.text.neutral.brand}
                />
              )}
              <Stack
                sx={{ flexDirection: 'row', gap: 0.5, alignItems: 'center' }}
              >
                <Typography
                  variant="globalL"
                  sx={{
                    pb: 0.5,
                    fontWeight: 'fontWeightSemiBold',
                    color: theme.palette.new.text.neutral.brand,
                  }}
                >
                  {policyType?.amount}
                </Typography>
                <Typography
                  variant="globalS"
                  sx={{
                    fontWeight: 'fontWeightSemiBold',
                    color: theme.palette.new.text.neutral.brand,
                  }}
                >
                  {t(getTimeByUnit(policyType?.unit), {
                    count: policyType?.amount,
                  })}
                </Typography>
              </Stack>
            </Stack>
            <Typography
              variant="globalXS"
              sx={{ fontWeight: 'fontWeightSemiBold' }}
            >
              {t(getLabelByallowanceType(policyType), {
                count: policyType?.amount,
              })}
            </Typography>
          </Stack>
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default PolicyTypesItem;
