import React, { useEffect, useState } from 'react';
import {
  Box,
  Container,
  FormStatusMessage,
  Grid,
  GridItem,
  HeroPortal,
  Input,
  MainButton,
  SecondaryButton,
  Text,
  useViewport,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import {
  EquipmentRentalVariant,
  useAddEquipmentRentalsMutation,
  useEquipmentRentalsQuery,
  useRegisterEquipmentRentalsMutation,
  useUpdateEquipmentRentalsMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';
import { withStaff } from 'utils/with-staff';

const COLOR = 'pink';

type EquipmentRentalInfoType = {
  id?: string;
  sku: string;
  trackingCode: string;
};

const BunadarleigaSkraning = withStaff(() => {
  const { t } = useTranslation('staff');
  const { isSmall } = useViewport();
  const [customerSsn, setCustomerSsn] = useState('');
  const [orderId, setOrderId] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [existingEquipmentRentalInfo, setExistingEquipmentRentalInfo] = useState<
    EquipmentRentalInfoType[]
  >([]);
  const [newEquipmentsRentalData, setNewEquipmentsRentalData] = useState<EquipmentRentalInfoType[]>(
    [],
  );

  const { data, loading, refetch } = useEquipmentRentalsQuery({
    variables: {
      input: {
        customerSsn: customerSsn,
        orderId: orderId,
      },
    },
  });

  const currentEquipmentsRentalData = data?.equipmentRentals as EquipmentRentalVariant[];

  const [addNewEquipmentRental, { loading: addEquipmentRentalLoading }] =
    useAddEquipmentRentalsMutation({
      onCompleted: async (data) => {
        if (data?.addEquipmentRentals?.id) {
          await updateEquipmentRental({
            variables: {
              input: {
                id: data?.addEquipmentRentals?.id,
                path: 'Status',
                op: 'replace',
                value: 'Pending',
              },
            },
          });
        }
      },
      onError: () => {
        setErrorMessage(t('equipmentRentals.addError'));
      },
    });

  const [updateEquipmentRental, { loading: updateEquipmentRentalLoading }] =
    useUpdateEquipmentRentalsMutation({
      onCompleted: () => {
        refetch();
      },
      onError: () => {
        setErrorMessage(t('equipmentRentals.updateError'));
      },
    });

  const handleAddNewEquipmentRental = () => {
    newEquipmentsRentalData.map(async (newEquipmentRentalData) => {
      await addNewEquipmentRental({
        variables: {
          input: {
            orderId: orderId,
            customerNationalId: customerSsn,
            sku: newEquipmentRentalData.sku,
            trackingCode: newEquipmentRentalData.trackingCode,
            type: 'Indefinite',
            fixedMonths: 0,
          },
        },
      });
    });
    setNewEquipmentsRentalData([]);
  };

  const [registerEquipmentRentals, { loading: registerEquipmentRentalLoading }] =
    useRegisterEquipmentRentalsMutation({
      onCompleted: () => {
        refetch();
      },
      onError: () => {
        setErrorMessage(t('equipmentRentals.registerError'));
      },
    });
  const handleOnSubmitEquipmentRental = async () => {
    const newEquipmentsRentalData = currentEquipmentsRentalData
      .filter(
        (filterEquipmentRentalData) => filterEquipmentRentalData.equipmentRental?.trackingCode,
      )
      .map((currEquipmentRentalData) => {
        if (currEquipmentRentalData.equipmentRental?.trackingCode) {
          return {
            sku: currEquipmentRentalData.equipmentRental.sku,
            trackingCode: currEquipmentRentalData.equipmentRental.trackingCode,
          };
        }
      }) as EquipmentRentalInfoType[];
    const existingEquipmentRental = existingEquipmentRentalInfo.map((existingEquipmentRental) => {
      return {
        sku: existingEquipmentRental.sku,
        trackingCode: existingEquipmentRental.trackingCode,
      };
    });

    const registerEquipments = [...existingEquipmentRental, ...newEquipmentsRentalData];
    await registerEquipmentRentals({
      variables: {
        input: {
          orderId: orderId,
          equipment: registerEquipments,
        },
      },
    });
  };

  useEffect(() => {
    if (customerSsn.length === 10 && orderId) refetch();
  }, [customerSsn, orderId]);

  const isLoading =
    registerEquipmentRentalLoading || addEquipmentRentalLoading || updateEquipmentRentalLoading;

  return (
    <Wrapper header="dark">
      <Box marginY={10}>
        <HeroPortal color={COLOR} title={t('equipmentRentals.title')} />
        <Container>
          <Box display="flex" flexDirection="row" gap={8} marginTop={5}>
            <Input
              id="customerSsn"
              name="customerSsn"
              label={t('equipmentRentals.customerSsn')}
              value={customerSsn}
              maxLength={10}
              onChange={(e) => setCustomerSsn(e.target.value)}
              color="black100"
              required
            />
            <Input
              id="orderId"
              name="orderId"
              label={t('equipmentRentals.orderId')}
              value={orderId}
              onChange={(e) => setOrderId(e.target.value)}
              color="black100"
              required
            />
          </Box>
          {currentEquipmentsRentalData && currentEquipmentsRentalData.length > 0 && (
            <Box
              display={'flex'}
              justifyContent={isSmall ? 'flex-start' : 'flex-end'}
              marginTop={3}
            >
              <SecondaryButton
                color={COLOR}
                icon="add"
                text="Bæta við búnað"
                onClick={() => {
                  setNewEquipmentsRentalData([
                    ...newEquipmentsRentalData,
                    {
                      sku: '',
                      trackingCode: '',
                    },
                  ]);
                }}
              />
            </Box>
          )}
          {errorMessage && <FormStatusMessage status="error" message={errorMessage} />}
          {currentEquipmentsRentalData && currentEquipmentsRentalData.length > 0 && (
            <Box marginY={10}>
              <Grid gridTemplate={{ sm: 2, md: 10 }} alignItems="center">
                <GridItem gridColumn={{ md: 'span2' }} hiddenOn={['sm']}>
                  <Text variant="pMediumBold">{t('equipmentRentals.orderId')}</Text>
                </GridItem>
                <GridItem gridColumn={{ md: 'span2' }} hiddenOn={['sm']}>
                  <Text variant="pMediumBold">{t('equipmentRentals.equipment')}</Text>
                </GridItem>
                <GridItem gridColumn={{ md: 'span2' }} hiddenOn={['sm']}>
                  <Text variant="pMediumBold">{t('equipmentRentals.status')}</Text>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                  <Text variant="pMediumBold">{t('equipmentRentals.sku')}</Text>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                  <Text variant="pMediumBold">{t('equipmentRentals.serialId')}</Text>
                </GridItem>
              </Grid>

              {loading && <Text>Sæki gögn...</Text>}

              {newEquipmentsRentalData &&
                newEquipmentsRentalData.map((newEquipmentRental, i) => {
                  return (
                    <Grid
                      gridTemplate={{ sm: 2, md: 10, lg: 10 }}
                      key={i}
                      columnGap={4}
                      alignItems="flex-end"
                    >
                      <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                        <Text variant="pXSmallRegular">{orderId}</Text>
                      </GridItem>
                      <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                        <Text>n/a</Text>
                      </GridItem>
                      <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                        <Text>n/a</Text>
                      </GridItem>
                      <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                        <Input
                          id="sku"
                          name="sku"
                          type="text"
                          isBold={false}
                          autoCapitalize="none"
                          autoComplete="off"
                          style={{ fontSize: '16px' }}
                          placeholder="Sku"
                          onChange={(e) => {
                            setNewEquipmentsRentalData([
                              ...newEquipmentsRentalData.filter(
                                (e) => e.trackingCode !== newEquipmentRental.trackingCode,
                              ),
                              { ...newEquipmentRental, sku: e.target.value },
                            ]);
                          }}
                        />
                      </GridItem>
                      <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                        <Input
                          id="trackingCode"
                          name="trackingCode"
                          type="text"
                          isBold={false}
                          autoComplete="off"
                          style={{ fontSize: '16px' }}
                          placeholder="SerialId"
                          onChange={(e) => {
                            setNewEquipmentsRentalData([
                              ...newEquipmentsRentalData.filter(
                                (e) => e.trackingCode !== newEquipmentRental.trackingCode,
                              ),
                              { ...newEquipmentRental, trackingCode: e.target.value },
                            ]);
                          }}
                        />
                      </GridItem>
                    </Grid>
                  );
                })}

              {currentEquipmentsRentalData.map((currEquipmentRental, i) => {
                return (
                  <Grid
                    gridTemplate={{ sm: 2, md: 10 }}
                    key={i}
                    columnGap={4}
                    alignItems="flex-end"
                  >
                    <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                      <Text variant="pXSmallRegular">
                        {currEquipmentRental.equipmentRental?.orderId}
                      </Text>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                      <Text>{currEquipmentRental.variant?.productName}</Text>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', md: 'span2' }} hiddenOn={['sm']}>
                      <Text>{currEquipmentRental.equipmentRental?.status}</Text>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                      <Text>{currEquipmentRental.equipmentRental?.sku}</Text>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', md: 'span2' }}>
                      {!currEquipmentRental.equipmentRental?.trackingCode ? (
                        <Input
                          id="serialId"
                          name="serialId"
                          type="text"
                          isBold={false}
                          autoCapitalize="none"
                          autoComplete="off"
                          style={{ fontSize: '16px' }}
                          placeholder="SerialId"
                          onChange={(e) =>
                            setExistingEquipmentRentalInfo([
                              ...existingEquipmentRentalInfo.filter(
                                (e) => e.id !== currEquipmentRental.equipmentRental?.id,
                              ),
                              {
                                id: currEquipmentRental.equipmentRental?.id ?? '',
                                sku: currEquipmentRental.equipmentRental?.sku ?? '',
                                trackingCode: e.target.value,
                              },
                            ])
                          }
                        />
                      ) : (
                        <Text>{currEquipmentRental.equipmentRental?.trackingCode}</Text>
                      )}
                    </GridItem>
                  </Grid>
                );
              })}
              <Box display="flex" justifyContent="flex-end" marginTop={20}>
                <Box width={{ sm: '100%', md: '3/12', xl: '3/12' }}>
                  <MainButton
                    text={
                      newEquipmentsRentalData.length > 0
                        ? t('equipmentRentals.save')
                        : t('equipmentRentals.submit')
                    }
                    color={COLOR}
                    icon="checkMark"
                    onClick={() => {
                      newEquipmentsRentalData.length > 0
                        ? handleAddNewEquipmentRental()
                        : handleOnSubmitEquipmentRental();
                    }}
                    dottedShadow="none"
                    isLoading={isLoading}
                  />
                </Box>
              </Box>
            </Box>
          )}
        </Container>
      </Box>
    </Wrapper>
  );
});

BunadarleigaSkraning.getInitialProps = () => {
  return {
    namespacesRequired: ['staff'],
  };
};
export default BunadarleigaSkraning;