import {
  IconBinaryTree,
  IconCalendar,
  IconUser,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { WorkflowDetail } from 'src/types/workflows';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { formatUTCDateTime } from 'src/utils/timeUtils';

type Props = {
  workflow: WorkflowDetail;
};

const Detail = ({ workflow }: Props) => {
  const { t } = useLokaliseTranslation('workflows');
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack sx={{ height: '100%', gap: 2 }}>
        <Typography
          variant="globalS"
          fontWeight="semiBold"
        >
          {t('basic_info')}
        </Typography>
        <Stack
          sx={{
            backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
            borderRadius: 2,
            gap: 2,
            p: 2,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: workflow.description ? 'top' : 'center',
              gap: 1,
            }}
          >
            <HuAvatar
              Icon={IconBinaryTree}
              size="medium"
              color="default"
            />
            <HuTitle
              variant="S"
              title={workflow.name}
              description={workflow.description}
              sx={{
                '& .MuiTypography-root': {
                  wordBreak: 'break-word',
                  overflowWrap: 'break-word',
                },
              }}
            />
          </Stack>
        </Stack>
        <Typography
          variant="globalS"
          fontWeight="semiBold"
        >
          {t('creation')}
        </Typography>
        <Stack
          sx={{
            backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
            borderRadius: 2,
            gap: 2,
            p: 2,
          }}
        >
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <HuAvatar
              Icon={IconCalendar}
              size="medium"
              color="default"
            />
            <HuTitle
              variant="S"
              copetin={t('creation_date')}
              title={formatUTCDateTime(
                workflow.createdAt,
                'dd/MMM/yyyy',
              ).toUpperCase()}
            />
          </Stack>
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <HuAvatar
              Icon={IconUser}
              size="medium"
              color="default"
            />
            <HuTitle
              variant="S"
              copetin={t('creator')}
              title={workflow.creator.fullName}
            />
          </Stack>
        </Stack>
        <Typography
          variant="globalS"
          fontWeight="semiBold"
        >
          {t('last_update')}
        </Typography>
        <Stack
          sx={{
            backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
            borderRadius: 2,
            gap: 2,
            p: 2,
          }}
        >
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <HuAvatar
              Icon={IconCalendar}
              size="medium"
              color="default"
            />
            <HuTitle
              variant="S"
              copetin={t('edition_date')}
              title={formatUTCDateTime(
                workflow.updatedAt,
                'dd/MMM/yyyy',
              ).toUpperCase()}
            />
          </Stack>
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <HuAvatar
              Icon={IconUser}
              size="medium"
              color="default"
            />
            <HuTitle
              variant="S"
              copetin={t('editor')}
              title={workflow.updater.fullName}
            />
          </Stack>
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Detail;