import React, { useEffect, useState } from 'react';
import { Box, Datepicker, MainButton, Text, useViewport } from '@nova-hf/ui';
import { cloneDeep } from 'lodash';
import { inject, observer } from 'mobx-react';
import Cart from 'store/cart';
import MobileSignup, { throwErrorWithMessage } from 'store/mobileSignup';
import { PurchaseInfoInput, useMobileCartQuery } from 'typings/graphql';
import { signupScroll } from 'utils/helpers';

import StepsWrapper from './StepsWrapper';

type VirkjunProps = {
  mobileSignup?: MobileSignup;
  cart?: Cart;
};

const Virkjun = ({ mobileSignup, cart }: VirkjunProps) => {
  const { isSmall } = useViewport();
  const [isLoading, setIsLoading] = useState(false);
  const [activationDate, setActivationDate] = useState<Date>(new Date());

  const { data, loading } = useMobileCartQuery({
    skip: !cart?.activeCartId,
    variables: {
      input: {
        cartId: cart?.activeCartId ?? '',
      },
    },
    initialFetchPolicy: 'no-cache',
  });

  const updatePortInDate = async (date: Date) => {
    setIsLoading(true);
    try {
      const items = data?.cart?.items;
      const referenceItems = items?.filter(
        (item) => item?.purchaseInfo?.contract && 'cartItemId' in item.purchaseInfo.contract,
      );

      if (referenceItems && referenceItems.length) {
        for (const item of referenceItems) {
          if (item?.purchaseInfo?.contract && 'cartItemId' in item.purchaseInfo.contract) {
            const cartItemId = item?.purchaseInfo?.contract?.cartItemId;
            const mobileServiceItem = await mobileSignup?.findServiceItem(cartItemId);
            const serviceItem = cloneDeep(mobileServiceItem);
            if (
              serviceItem?.purchaseInfo &&
              serviceItem.purchaseInfo.service &&
              serviceItem.purchaseInfo.service?.__typename === 'MobileServiceRequest' &&
              serviceItem.purchaseInfo.service?.portInDate
            ) {
              serviceItem.purchaseInfo.service.portInDate = date;
              setActivationDate(date);
            }
            if (serviceItem?.id && serviceItem?.variantId && serviceItem?.purchaseInfo) {
              await cart?.updateCartItem({
                id: serviceItem?.id,
                variantId: serviceItem?.variantId,
                quantity: serviceItem?.quantity,
                purchaseInfo: serviceItem?.purchaseInfo as PurchaseInfoInput,
              });
            }
          }
        }
      }
    } catch (error) {
      throwErrorWithMessage(error, 'Ekki tókst að vista virkjunardagsetningu');
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    const now = new Date();
    now.setHours(now.getHours() + 1);

    const minutes = now.getMinutes();
    if (minutes > 0 && minutes <= 30) {
      now.setMinutes(30);
    } else {
      now.setHours(now.getHours() + 1);
      now.setMinutes(0);
    }

    now.setSeconds(0);
    now.setMilliseconds(0);

    setActivationDate(now);
  }, []);

  const onSubmit = async () => {
    setIsLoading(true);
    await updatePortInDate(activationDate);
    setIsLoading(false);
    signupScroll('#payer');
  };

  if (loading) return null;

  const minDate = new Date();

  const minimumDateNotAchieved = activationDate < minDate;

  return (
    <StepsWrapper
      id={'virkjun'}
      title={'Almennur virkjunartími'}
      subtitle="Þú getur stillt tímann sem þú vilt flytjast yfir til Nova"
      isFirstStep={true}
    >
      {isSmall ? (
        <Box display="flex" flexDirection="column" gap={3}>
          <Datepicker
            onSelect={(date) => updatePortInDate(date)}
            selected={activationDate}
            inputId={'dagsetning'}
            inputName={'Veldu dagssetningu'}
            minDate={new Date()}
            dateFormat="d. MMMM"
            label="Veldu dagssetningu"
            icon="calendar"
          />
          <Datepicker
            onSelect={(date) => updatePortInDate(date)}
            selected={activationDate}
            inputId={'time'}
            inputName={'Veldu tíma'}
            minDate={new Date()}
            showTimeSelectOnly
            showTimeSelect
            timeCaption={'Tími'}
            label="Veldu tíma"
            icon="history"
            timeFormat="p"
            timeIntervals={30}
            dateFormat="HH:mm"
          />
        </Box>
      ) : (
        <Datepicker
          onSelect={(date) => updatePortInDate(date)}
          selected={activationDate}
          inputId={'dagsetning'}
          inputName={'Veldu dagssetningu'}
          minDate={new Date()}
          showTimeSelect
          timeCaption={'Tími'}
          timeFormat="p"
          timeIntervals={30}
          dateFormat="d. MMMM, HH:mm"
          label="Veldu dagssetningu og tíma"
          icon="calendar"
        />
      )}

      {minimumDateNotAchieved && (
        <Text color="warning">Virkjunardagsetning getur ekki verið aftur í tímann</Text>
      )}
      <Box marginTop={2}>
        <MainButton
          isDisabled={!activationDate || isLoading || minimumDateNotAchieved}
          text={'Velja'}
          isLoading={isLoading}
          onClick={() => onSubmit()}
        />
      </Box>
    </StepsWrapper>
  );
};

export default inject('mobileSignup', 'cart')(observer(Virkjun));