import { type FC } from 'react';

import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import { getTaskID } from 'src/pages/dashboard/serviceManagement/utils';
import { type Task } from 'src/pages/dashboard/serviceManagement/types';
import { formatLocalizedDate } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import UserTooltip from './Information/UserTooltip';

export type InformationProps = {
  task?: Task;
  loading?: boolean;
};

const Information: FC<InformationProps> = ({ task, loading = false }) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        alignItems: 'center',
        p: 3,
        py: 2,
      }}
    >
      {loading && (
        <HuSkeleton
          width="300px"
          height="40px"
        />
      )}
      {!loading && task && (
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
          <HuTitle
            variant="S"
            copetin={t('number')}
            title={getTaskID(task) || '-'}
          />
          <HuTitle
            variant="S"
            copetin={t('creation_date')}
            title={formatLocalizedDate(task?.createdAt) || '-'}
          />
          <Divider
            orientation="vertical"
            sx={{ height: '40px' }}
          />
          {task?.assignee && (
            <UserTooltip
              user={task?.assignee!}
              tooltipProps={{
                direction: 'bottom',
              }}
            >
              <Button sx={{ py: 2.5, cursor: 'default' }}>
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1.5,
                  }}
                >
                  {task?.assignee && (
                    <HuAvatar
                      src={task?.assignee?.profilePicture}
                      size="small"
                    />
                  )}
                  <HuTitle
                    variant="S"
                    copetin={t('agent')}
                    title={getFullName(task?.assignee!)}
                  />
                </Stack>
              </Button>
            </UserTooltip>
          )}
          {!task?.assignee && (
            <HuTitle
              variant="S"
              copetin={t('agent')}
              title={t('unassigned')}
            />
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default Information;
