import React from 'react';
import { useQuery } from '@apollo/client';
import { Box, Icon, LoadingPlaceholder, MainButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { AddConnectionItem } from 'components/connection/ConnectionItem';
import { VISIT } from 'graphql/queries/visit';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import Change from 'store/change';
import Profile from 'store/models/Profile';
import { IUserData } from 'typings';
import { formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

interface ISignupProps {
  color: string;
  inConnectionItem?: boolean;
  authentication?: Authentication;
  change?: Change;
  profile: Profile;
}

const Signup = ({
  profile,
  authentication,
  change,
  inConnectionItem = false,
  color = 'yellow',
}: ISignupProps) => {
  const { t } = useTranslation('subscriptions');
  const router = useRouter();

  if (!authentication || !change || !profile) return null;

  const { accountInput } = authentication;
  const { subscriptionId, rateplan } = profile;

  const { loading, error, data } = useQuery<IUserData>(VISIT, {
    variables: { accountInput, subscriptionId },
  });

  if (inConnectionItem && loading) {
    return (
      <Box display="flex" flexDirection={'column'} gap={3} padding={[3, 4]} width="100%">
        <LoadingPlaceholder height={7} width="100%" />
      </Box>
    );
  }
  if (loading) {
    return (
      <Box
        display="flex"
        flexDirection={{ sm: 'column', md: 'row' }}
        gap={{ sm: 1, md: 3 }}
        padding={[3, 4]}
        marginBottom={5}
        borderColor="grey200"
        borderStyle="solid"
        borderWidth="1px"
        boxShadow="normal"
        dottedShadow="small"
        backgroundColor="white"
      >
        <Box>
          <Icon icon="home" color={color as MainColorType} size={32} />
        </Box>
        <Box display="flex" flexDirection="column" gap={3} width="100%">
          <LoadingPlaceholder height={4} width="50%" />

          <LoadingPlaceholder height={9} width="100%" />
          <Box width={['100%', '5/12', '5/12', '4/12']}>
            <MainButton
              text=" "
              dottedShadow="none"
              isLoading
              colorScheme={color as MainColorType}
            />
          </Box>
        </Box>
      </Box>
    );
  }

  if (error || !data?.me?.subscriptions?.subscriptions[0]) {
    return <div>Villa...</div>;
  }

  const {
    me: {
      subscriptions: { subscriptions },
    },
  } = data;

  const { visitSlotInfo } = subscriptions[0];
  if (!visitSlotInfo) {
    return null;
  }
  const { code, bookDate } = visitSlotInfo;

  profile.updateVisitSlotInfo(visitSlotInfo);

  if (!profile.fiberNeedsVisit) {
    return null;
  }

  const bookVisit = () => {
    change.selectProfile(profile);

    router.push(`/${router.query.ssn}/thjonusta/${subscriptionId}/heimsokn`);
  };

  const removeVisit = () => {
    change.initChangeVisit(visitSlotInfo);

    router.push(`/${router.query.ssn}/thjonusta/${subscriptionId}/afskra`);
  };

  const signupInfo =
    code === 2
      ? {
          title: t('signup.needVisit.title'),
          description: !rateplan.isVip ? t('signup.needVisit.description') : '',
          info: t('signup.needVisit.info'),
          onClick: !rateplan.isVip ? bookVisit : undefined,
        }
      : {
          title: t('signup.bookedVisit.title'),
          description: t('signup.bookedVisit.description', {
            date: bookDate && formatDate(new Date(bookDate), 'd.MMM'),
            time: bookDate && formatDate(new Date(bookDate), 'H:mm'),
          }),
          info: t('signup.bookedVisit.info'),
          onClick: !rateplan.isVip ? removeVisit : undefined,
        };

  if (inConnectionItem) {
    return (
      <AddConnectionItem
        type="Fiber"
        arrow
        title={signupInfo.title}
        description={signupInfo.description || ''}
        color="yellow"
        onClick={signupInfo.onClick}
        className="tourBookSlot"
      />
    );
  }
  return (
    <Box
      display="flex"
      flexDirection={{ sm: 'column', md: 'row' }}
      gap={{ sm: 1, md: 3 }}
      padding={[3, 4]}
      marginBottom={5}
      borderColor="grey200"
      borderStyle="solid"
      borderWidth="1px"
      boxShadow="normal"
      dottedShadow="small"
      backgroundColor="white"
    >
      <Box>
        <Icon icon="home" color={color as MainColorType} size={32} />
      </Box>
      <Box display="flex" flexDirection="column" gap={3}>
        <Text variant="h6">{signupInfo.title}</Text>

        <Text variant="pMediumBold">{signupInfo.description}</Text>
        <Text variant="pMediumRegular">{signupInfo.info}</Text>
        <Box width={['100%', '5/12', '5/12', '4/12']}>
          <MainButton
            text={
              visitSlotInfo?.code === 2
                ? t('signup.needVisit.buttonText')
                : t('signup.bookedVisit.buttonText')
            }
            dottedShadow="none"
            onClick={signupInfo.onClick}
            icon="longArrowRight"
            colorScheme={color as MainColorType}
          />
        </Box>
      </Box>
    </Box>
  );
};

Signup.getInitalProps = () => {
  return {
    namespacesRequired: ['subscriptions'],
  };
};

export default inject('authentication', 'change')(Signup);