import * as React from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import AlertTitle from '@mui/material/AlertTitle';
import Alert from '@mui/material/Alert';
import type { IExecutionStep } from '@automatisch/types';

import useFormatMessage from 'hooks/useFormatMessage';
import ExecutionHeader from 'components/ExecutionHeader';
import ExecutionStep from 'components/ExecutionStep';
import Container from 'components/Container';
import { GET_EXECUTION } from 'graphql/queries/get-execution';
import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';

type ExecutionParams = {
  executionId: string;
};

const EXECUTION_PER_PAGE = 100;

const getLimitAndOffset = (page: number) => ({
  limit: EXECUTION_PER_PAGE,
  offset: (page - 1) * EXECUTION_PER_PAGE,
});

export default function Execution(): React.ReactElement {
  const { executionId } = useParams() as ExecutionParams;
  const formatMessage = useFormatMessage();
  const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
  const { data, loading } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });

  const { edges } = data?.getExecutionSteps || {};
  const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);

  return (
    <Container sx={{ py: 3 }}>
      <ExecutionHeader
        execution={execution?.getExecution}
      />

      <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
        {!loading && !executionSteps?.length && (
          <Alert severity="warning" sx={{ flex: 1 }}>
            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('execution.noDataTitle')}</AlertTitle>

            <Box sx={{ fontWeight: 400 }}>{formatMessage('execution.noDataMessage')}</Box>
          </Alert>
        )}

        {executionSteps?.map((executionStep) => (
          <ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
        ))}
      </Grid>
    </Container>
  );
};
