import { type FC } from 'react';
import { useQuery } from 'react-query';

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 { useAuth } from 'src/contexts/JWTContext';
import { getTaskID } from 'src/pages/dashboard/serviceManagement/utils';
import { getTransitionsStates } from 'src/pages/dashboard/serviceManagement/services';
import {
  ApprovalScreenSource,
  type Task,
} from 'src/pages/dashboard/serviceManagement/types';
import { formatLocalizedDate } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { serviceManagementKeys } from '../../../queries';
import { getUserDisplayName } from '../../../utils';
import { ApprovalActions } from '../../serviceItems/components/ApprovalActions';

import UserTooltip from './Information/UserTooltip';

export type ApprovalInformationProps = {
  task?: Task;
  loading?: boolean;
  invalidateQueries?: () => void;
};

const ApprovalInformation: FC<ApprovalInformationProps> = ({
  task,
  loading = false,
  invalidateQueries,
}) => {
  const { t } = useLokaliseTranslation('service_management');
  const { user: loggedUser } = useAuth();
  const { data: states } = useQuery(
    serviceManagementKeys.states.list(task?.state.id!),
    () => getTransitionsStates(task?.state.id!),
    {
      enabled: !task?.state.terminal,
      select: response => response.data,
    },
  );

  return (
    <Stack
      sx={{
        width: '100%',
        p: 3,
        py: 2,
      }}
    >
      {loading && (
        <HuSkeleton
          width="300px"
          height="40px"
        />
      )}
      {!loading && task && (
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <HuTitle
              variant="S"
              copetin={t('number')}
              title={getTaskID(task.parentTask!) || '-'}
            />
            <UserTooltip
              user={task?.parentTask?.initiator!}
              tooltipProps={{
                direction: 'bottom',
              }}
            >
              <Button sx={{ py: 2.5, cursor: 'default' }}>
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1.5,
                  }}
                >
                  {task?.parentTask?.initiator && (
                    <HuAvatar
                      src={task?.parentTask?.initiator?.profilePicture}
                      size="small"
                    />
                  )}
                  <HuTitle
                    variant="S"
                    withEllipsis
                    sx={{ maxWidth: '150px' }}
                    copetin={t('approvals.requested_by_short')}
                    title={getUserDisplayName(
                      task?.parentTask?.initiator!,
                      loggedUser!,
                      t,
                    )}
                  />
                </Stack>
              </Button>
            </UserTooltip>
            <Divider
              orientation="vertical"
              sx={{ height: '40px', mr: 2 }}
            />
            <HuTitle
              variant="S"
              copetin={t('approvals.steps')}
              title={task.name}
              withEllipsis
              overflow="tooltip"
              sx={{ maxWidth: '250px', mr: 1 }}
            />
            <HuTitle
              variant="S"
              copetin={t('approvals.requested')}
              title={formatLocalizedDate(task?.createdAt) || '-'}
            />
          </Stack>
          <Stack>
            {!task.state.terminal && (
              <ApprovalActions
                task={task!}
                states={states || []}
                invalidateQueries={invalidateQueries}
                screenSource={ApprovalScreenSource.APPROVAL_DETAIL}
              />
            )}
          </Stack>
        </Stack>
      )}
    </Stack>
  );
};

export default ApprovalInformation;
