import React, { useEffect, useState } from 'react';
import {
  AccordionBase,
  Box,
  Checkbox,
  ContentImage,
  Grid,
  GridItem,
  Icon,
  Input,
  MainButton,
  NotificationBanner,
  SecondaryButton,
  Text,
} from '@nova-hf/ui';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import {
  CustomerCostDecision,
  RepairMessage,
  RepairRequestStatus,
  useCustomerIdByNationalIdQuery,
  usePostRepairMessageMutation,
  useRepairRequestMessagesLazyQuery,
  useRepairRequestsQuery,
} from 'typings/graphql';
import { formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

type VidgerdirContainerProps = {
  ui: UI;
  authentication?: Authentication;
};

type SimpleMessage = {
  subject: string;
  message: string;
  notifyCustomer: boolean;
};

const VidgerdirContainer = ({ ui, authentication }: VidgerdirContainerProps) => {
  const { t } = useTranslation('common');
  const router = useRouter();
  const ssn = router?.query?.ssn ?? '';
  const [isOpen, setIsOpen] = useState<string[]>([]);
  const [showMessages, setShowMessage] = useState<string[]>([]);
  const [messages, setMessages] = useState<RepairMessage[]>([]);
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    ui?.setPageColor('green');
  }, []);

  const statusIcelandicMap: Record<RepairRequestStatus, string> = {
    New: t('repairs.status.new'),
    Received: t('repairs.status.received'),
    Waiting: t('repairs.status.waiting'),
    InRepair: t('repairs.status.inRepair'),
    Abroad: t('repairs.status.abroad'),
    Ready: t('repairs.status.ready'),
    InTransportationToAgent: t('repairs.status.inTransportationToAgent'),
    AtAgent: t('repairs.status.atAgent'),
    InTransportationToStore: t('repairs.status.inTransportationToStore'),
    SentToCustomer: t('repairs.status.sentToCustomer'),
    AtStore: t('repairs.status.atStore'),
    PickedUp: t('repairs.status.pickedUp'),
    DeviceReplaced: t('repairs.status.deviceReplaced'),
    Completed: t('repairs.status.completed'),
  };

  const customerCostDecisionIcelandicMap: Record<CustomerCostDecision, string> = {
    NoDecision: t('repairs.customerCostDecision.noDecision'),
    RepairAccepted: t('repairs.customerCostDecision.repairAccepted'),
    RepairRejected: t('repairs.customerCostDecision.repairRejected'),
    WaitingOnDecision: t('repairs.customerCostDecision.waitingOnDecision'),
    CustomerUnreachable: t('repairs.customerCostDecision.customerUnreachable'),
    NovaCoversCost: t('repairs.customerCostDecision.novaCoversCost'),
  };

  const { data: customerData, error: customerError } = useCustomerIdByNationalIdQuery({
    variables: {
      input: {
        nationalId: ssn.toString(),
      },
    },
    skip: !ssn,
  });

  const customerId = customerData?.customerByNationalId?.id;

  const { data, loading, error } = useRepairRequestsQuery({
    variables: { input: { customer_id: customerId ?? '' } },
  });

  const [getMessages, { refetch: messageRefetch }] = useRepairRequestMessagesLazyQuery({
    onCompleted(data) {
      setMessages(data?.repairRequestMessages);
    },
  });

  const [postMessage] = usePostRepairMessageMutation({
    onCompleted() {
      messageRefetch();
      enqueueSnackbar(t('repairs.postMessageSuccess'), {
        variant: 'success',
      });
    },
    onError() {
      enqueueSnackbar(t('repairs.postMessageError'), {
        variant: 'error',
      });
    },
  });

  const repairs = data?.repairRequests;

  const [messageInput, setMessageInput] = useState<SimpleMessage>({
    message: '',
    subject: '',
    notifyCustomer: false,
  });

  const handleClick = (id: string) => {
    if (isOpen.includes(id)) {
      setIsOpen(isOpen.filter((openId) => openId !== id));
    } else {
      setIsOpen([...isOpen, id]);
    }
  };

  const handleMessagesClick = (id: string) => {
    if (showMessages.includes(id)) {
      setShowMessage(showMessages.filter((showMessagesId) => showMessagesId !== id));
    } else {
      getMessages({
        variables: {
          input: {
            repairRequestId: id,
          },
        },
      });
      setShowMessage([id]);
    }
  };

  const handleSubmitMessage = async (repairRequestId: string) => {
    await postMessage({
      variables: {
        input: {
          repairRequestId: repairRequestId,
          subject: messageInput.subject,
          message: messageInput.message,
          notifyCustomer: messageInput.notifyCustomer,
        },
      },
    });
  };

  const handleLookClick = (e: React.MouseEvent | undefined, repairId: string | undefined) => {
    e?.preventDefault();
    window.location.href = `/beta/${customerId}/vidgerdir/${repairId}`;
  };

  if (error || customerError || loading || !repairs) {
    return (
      <Box display="flex" flexDirection="column" padding={10} width="8/12">
        <Box marginBottom={2} marginLeft="auto">
          <SecondaryButton
            colorScheme="green"
            icon={'add'}
            text={'Skrá viðgerð'}
            onClick={() => router.push('https://innri.nova.is/vidgerd')}
          />
        </Box>
        <NotificationBanner
          eyebrowText={t('repairs.noResultsEyebrow')}
          description=""
          icon="novaLogo"
          color="green"
          title={t('repairs.noRepairsFoundTitle')}
        />
      </Box>
    );
  }

  return (
    <>
      {!!repairs && repairs.length ? (
        <Box width="8/12" marginX={10} marginY={5}>
          <Box
            justifyContent={'space-between'}
            display="flex"
            flexDirection="row"
            alignItems="center"
            marginY={1}
          >
            <Text variant="h6">{t('repairs.title')}</Text>
            <Box>
              <SecondaryButton
                colorScheme="green"
                icon={'add'}
                text={'Skrá viðgerð'}
                onClick={() => router.push('https://innri.nova.is/vidgerd')}
              />
            </Box>
          </Box>
          <Text variant="pMediumRegular">
            {t('repairs.description', { ssn: router?.query?.ssn })}
          </Text>
        </Box>
      ) : (
        <Box>
          <Text>Engar viðgerðir fundust...</Text>
        </Box>
      )}
      {repairs?.map((r) => (
        <Box
          boxShadow="small"
          padding={3}
          marginX={10}
          marginY={2}
          borderColor="green"
          borderWidth="2px"
          borderStyle="solid"
          key={r?.id}
        >
          <AccordionBase
            accordionBody={
              <>
                <Box display="flex" justifyContent="flex-end">
                  <SecondaryButton
                    colorScheme="green"
                    icon="search"
                    text="Skoða viðgerð"
                    onClick={(e) => handleLookClick(e, r?.id)}
                  />
                </Box>
                <Box borderColor="grey300" borderBottomStyle="solid" marginY={6}>
                  <Box marginBottom={3}>
                    <Text variant="pLargeBold">{t('repairs.deviceTitle')}</Text>
                  </Box>
                  <Box marginBottom={2}>
                    <Grid gridTemplate={{ sm: 3, xl: 6 }}>
                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.deviceTypeLabel')}</Text>
                          <Text variant="pSmallRegular">{r?.deviceModel}</Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.deviceSentToLabel')}</Text>
                          <Text variant="pSmallRegular">{r?.vendor}</Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.registeredLabel')}</Text>
                          <Box display="flex" flexDirection="column">
                            <Text variant="pSmallRegular">{r?.pickupLocation}</Text>
                            {authentication?.isStaff && (
                              <Text variant="pXSmallRegular">{r?.registeredBy}</Text>
                            )}
                          </Box>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">Viðgerðarnúmer</Text>
                          <Text variant="pSmallRegular">{r?.requestNumber}</Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.hasWarrantyLabel')}</Text>
                          <Text variant="pSmallRegular">
                            {r?.hasWarranty
                              ? t('repairs.hasWarrantyYes')
                              : t('repairs.hasWarrantyNo')}
                          </Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.handoverDateLabel')}</Text>
                          <Text variant="pSmallRegular">
                            {r?.handoverDate ? formatDate(r?.handoverDate, 'dd.MM.yyyy') : ''}
                          </Text>
                        </Box>
                      </GridItem>
                    </Grid>
                  </Box>
                </Box>
                <Box borderBottomStyle="solid" borderColor="grey300" marginY={6}>
                  <Box marginBottom={3}>
                    <Text variant="pLargeBold">{t('repairs.repairTitle')}</Text>
                  </Box>
                  <Box marginBottom={2}>
                    <Grid gridTemplate={{ sm: 5, xl: 5 }}>
                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.isDeviceUselessLabel')}</Text>
                          <Text variant="pSmallRegular">
                            {r?.isDeviceUseless
                              ? t('repairs.isDeviceUselessYes')
                              : t('repairs.isDeviceUselessNo')}
                          </Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.repairCostLabel')}</Text>
                          <Text variant="pSmallRegular">
                            {r?.repairCost ?? t('repairs.repairCostUnknown')}
                          </Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.repairDescriptionLabel')}</Text>
                          <Text variant="pSmallRegular">{r?.repairerDescription}</Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.customerCostDecisionLabel')}</Text>
                          <Text variant="pSmallRegular">
                            {
                              customerCostDecisionIcelandicMap[
                                r?.customerCostDecision ?? CustomerCostDecision.NoDecision
                              ]
                            }
                          </Text>
                        </Box>
                      </GridItem>

                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.customerGetsNewDevice')}</Text>
                          <Text variant="pSmallRegular">{r?.customerGetsNewDevice}</Text>
                        </Box>
                      </GridItem>
                    </Grid>
                  </Box>
                </Box>

                <Box borderBottomStyle="solid" borderColor="grey300" marginY={4}>
                  <Box marginBottom={3}>
                    <Text variant="pLargeBold">{t('repairs.defectDescriptionLabel')}</Text>
                  </Box>
                  <Box marginBottom={2}>
                    <Grid gridTemplate={{ sm: 2, xl: 4 }}>
                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.defectDescription')}</Text>
                          <Text variant="pSmallRegular">{r?.defectDescription}</Text>
                        </Box>
                      </GridItem>
                      <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallBold">{t('repairs.defectDetails')}</Text>
                          <Text variant="pSmallRegular">{r?.defectDetails}</Text>
                        </Box>
                      </GridItem>
                    </Grid>
                  </Box>
                </Box>
                <Box
                  cursor="pointer"
                  onClick={() => handleMessagesClick(r?.id)}
                  display="flex"
                  flexDirection="column"
                  alignItems="center"
                  justifyContent="center"
                >
                  {showMessages?.includes(r?.id) || !messages ? (
                    <>
                      <Text variant="pMediumBold">{t('repairs.hideMessages')}</Text>
                      <Icon color="green" icon="arrowUp" size={24} viewBox={24} />
                    </>
                  ) : (
                    <>
                      <Text variant="pMediumBold">{t('repairs.viewMessages')}</Text>
                      <Icon color="green" icon="arrowDown" size={24} viewBox={24} />
                    </>
                  )}
                </Box>
                {showMessages?.includes(r?.id) && (
                  <>
                    {messages?.map((m) => (
                      <Box display="flex" flexDirection="column" key={m?.id}>
                        {m?.repairRequestId === r?.id && (m?.message || m?.subject) && (
                          <Box
                            marginTop={2}
                            borderStyle="solid"
                            borderColor="grey200"
                            padding={2}
                            boxShadow="small"
                          >
                            <ContentImage
                              color="green"
                              eyebrow={
                                m?.created && m?.sender
                                  ? `${formatDate(m?.created, 'dd.MM.yyyy-hh:mm')} - ${
                                      m?.sender ? `${m.sender}` : ''
                                    }`
                                  : ''
                              }
                              text={m?.message ?? ''}
                              subtitle={m?.subject ?? ''}
                              title={''}
                            />
                          </Box>
                        )}
                      </Box>
                    ))}
                    <Box marginTop={3} display="flex" flexDirection="column" gap={2} width="10/12">
                      <Input
                        id="subject"
                        name="subject"
                        label={t('repairs.subjectLabel')}
                        value={messageInput.subject}
                        onChange={(e) =>
                          setMessageInput({ ...messageInput, subject: e.target.value })
                        }
                      />
                      <Input
                        id="message"
                        name="message"
                        label={t('repairs.messageLabel')}
                        value={messageInput.message}
                        onChange={(e) =>
                          setMessageInput({ ...messageInput, message: e.target.value })
                        }
                      />
                      <Checkbox
                        type="checked"
                        value={t('repairs.checkboxLabel')}
                        isChecked={messageInput.notifyCustomer}
                        onChange={(e) =>
                          setMessageInput({ ...messageInput, notifyCustomer: e.target.checked })
                        }
                        color="green"
                      />
                      <Box width="5/12">
                        <MainButton
                          onClick={() => handleSubmitMessage(r?.id)}
                          colorScheme="green"
                          text={t('repairs.sendMessageButton')}
                          dottedShadow="none"
                        />
                      </Box>
                    </Box>
                  </>
                )}
              </>
            }
            accordionHeader={
              !isOpen.includes(r?.id) ? (
                <Box onClick={() => handleClick(r?.id)}>
                  <Box
                    marginTop={-1}
                    marginLeft={-1}
                    marginBottom={2}
                    display="flex"
                    justifyContent="flex-start"
                  >
                    <Icon color="green" icon="novaLogo" size={24} viewBox={24} />
                  </Box>
                  <Grid gridTemplate={{ sm: 3, xl: 6 }}>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">Viðgerðarnúmer</Text>
                        <Text variant="pSmallRegular">{r?.requestNumber}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('repairs.saleDateLabel')}</Text>
                        <Text variant="pSmallRegular">
                          {r?.created ? formatDate(r?.created, 'dd.MM.yyyy') : ''}
                        </Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('repairs.requestedByLabel')}</Text>
                        <Box display="flex" flexDirection="column">
                          <Text variant="pSmallRegular">{r?.pickupLocation}</Text>
                          {authentication?.isStaff && (
                            <Text variant="pXSmallRegular">{r?.registeredBy}</Text>
                          )}
                        </Box>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('repairs.serviceProviderLabel')}</Text>
                        <Text variant="pSmallRegular">{r?.vendor}</Text>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box display="flex" flexDirection="column">
                        <Text variant="pSmallBold">{t('repairs.statusLabel')}</Text>
                        <Box display="flex" flexDirection={'column'}>
                          <Text variant="pSmallRegular">
                            {r?.status ? statusIcelandicMap[r.status] : t('repairs.unknownStatus')}
                          </Text>
                          <Text variant="pXSmallRegular">{`Uppfært ${
                            r?.updated && formatDate(r.updated, 'dd.MM.yyyy')
                          }`}</Text>
                        </Box>
                      </Box>
                    </GridItem>
                    <GridItem gridColumn={{ sm: 'span1', xl: 'span1' }}>
                      <Box>
                        <SecondaryButton
                          colorScheme="green"
                          icon="search"
                          text="Skoða viðgerð"
                          onClick={(e) => handleLookClick(e, r?.id)}
                        />
                      </Box>
                    </GridItem>
                  </Grid>
                </Box>
              ) : (
                <Box onClick={() => handleClick(r?.id)}>
                  <Text variant="eyebrowLarge">Upplýsingar</Text>
                </Box>
              )
            }
          />
        </Box>
      ))}
    </>
  );
};

VidgerdirContainer.getInitialProps = () => {
  return {
    namespacesRequired: 'common',
  };
};

export default inject('ui', 'authentication')(VidgerdirContainer);