import { FC } from 'react';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

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

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

export type PolicyTypesDetailItemProps = {
  policyType: PolicyTypes;
};

const PolicyTypesDetailItem: FC<PolicyTypesDetailItemProps> = props => {
  const { policyType } = props;

  const { t } = useLokaliseTranslation('time_off');
  const IconPolicyType = policyType?.icon && iconsPolicyTypes[policyType?.icon];

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

  return (
    <>
      {policyTypeDetailDrawer}
      <HuCardContainer
        padding={24}
        sx={{ width: '100%' }}
        onClick={() => showPolicyBalanceDetailDrawer({})}
      >
        <Stack>
          <Stack
            sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, p: 1 }}
          >
            {IconPolicyType && (
              <HuAvatar
                variant="square"
                color="primary"
                Icon={IconPolicyType}
              />
            )}
            <HuTitle
              variant="M"
              withEllipsis
              title={policyType?.name}
              sx={{
                maxWidth: 400,
              }}
            />
          </Stack>
          <Divider sx={{ my: 2 }} />
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-around',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <TimeComponent
              title={t('TIME_USED')}
              amount={policyType?.amountRequested}
              unit={policyType?.unit}
            />
            <TimeComponent
              title={t('AVAILABLE_TIME')}
              amount={policyType?.currentBalance}
              unit={policyType?.unit}
            />
          </Stack>
        </Stack>
      </HuCardContainer>
    </>
  );
};

const getTimeByUnit = (unit: UnitVacations) => {
  return unit === UnitVacations.DAYS ? 'total_days' : 'hours';
};

type TimeComponentProps = {
  title: string;
  amount?: number;
  unit: UnitVacations;
};
const TimeComponent = ({ title, amount, unit }: TimeComponentProps) => {
  const { t } = useLokaliseTranslation('time_off');

  return (
    <Stack sx={{ width: '100%', alignItems: 'center' }}>
      <Typography>{title}</Typography>
      <Typography fontWeight="fontWeightSemiBold">
        {Number.isInteger(amount)
          ? t(getTimeByUnit(unit), { count: amount })
          : '-'}
      </Typography>
    </Stack>
  );
};

export default PolicyTypesDetailItem;
