import React, { useEffect, useState } from 'react';
import {
  Box,
  Col,
  ContainerDeprecated,
  ModalDeprecated as Modal,
  ModalHeader,
  Pill,
  Text,
  TvChannel,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import Profile from 'store/models/Profile';
import UI from 'store/ui';
import { IContext } from 'typings/context';
import { useSspSubscriptionStatusQuery, useSubscriptionQuery } from 'typings/graphql';
import { formatDate, formatPrice } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import NovaTvHeroProfile from '../../../containers/hero/NovaTvHeroProfile';

interface IAskriftProps {
  ui: UI;
  subscriptionId: string;
  childSubscriptionId: string;
  authentication?: Authentication;
}

const Askrift = (props: IAskriftProps) => {
  const { subscriptionId, childSubscriptionId, authentication, ui } = props;
  const { t } = useTranslation('subscription');
  const router = useRouter();
  const nationalId = router?.query?.ssn?.toString();
  const [modalOpen, setModalOpen] = useState(false);

  if (!authentication) return null;

  const accountInput = authentication.accountInput;
  const isStaff = authentication.isStaff;

  // TODO -> Fix how we query tv subscpriton. Instead of querying with subscriptionId, query with childSubscriptionId. Need to add method to graphql.
  const { loading, data } = useSubscriptionQuery({
    variables: { subscriptionId, accountInput },
  });
  const { data: sspData } = useSspSubscriptionStatusQuery({
    variables: {
      input: {
        nationalId: nationalId ?? '',
      },
    },
  });
  const sspStatus = sspData?.sspSubscriptionStatus;
  const childSubscription = data?.me?.profiles?.[0]?.subscriptions?.find(
    (s) => s.id === childSubscriptionId,
  );
  const hasBeenCancelled = childSubscription?.cancelAtPeriodEnd;

  const closeModal = () => {
    setModalOpen(false);
  };

  useEffect(() => {
    ui.setHasSideMenu(false);
    ui?.setHasCustomerMenu(false);
    ui.setHeaderStyle('light');
  }, []);

  if (loading) {
    return (
      <Wrapper header="light">
        <div>Sæki...</div>
      </Wrapper>
    );
  }
  return (
    <Wrapper header="light">
      <Modal active={modalOpen} closeModal={() => closeModal()}>
        <Box margin={5}>
          <ModalHeader title={t('ssp.title')} color="black100" icon="tv" />
        </Box>
        <Box display="flex" flexDirection="column" gap={1} margin={5}>
          <Box display="flex" alignItems="center" flexDirection="row" gap={2}>
            <Text variant="pLargeBold">{t('ssp.subscriptionId')}</Text>
            <Text>{sspStatus?.subscriptionId}</Text>
          </Box>
          <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
            <Text variant="pLargeBold">{t('ssp.accountId')}</Text>
            <Text>{sspStatus?.accountId}</Text>
          </Box>
          <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
            <Text variant="pLargeBold">{t('ssp.status')}</Text>
            <Pill
              text={sspStatus?.isSubscriptionActive ? t('ssp.active') : t('ssp.inactive')}
              color={sspStatus?.isSubscriptionActive ? 'success' : 'warning'}
              maxWidth="fitContent"
            />
          </Box>
        </Box>
      </Modal>
      <NovaTvHeroProfile
        profile={data?.me?.profiles?.[0] as Profile | undefined}
        childSubscriptionId={childSubscriptionId}
      />
      <ContainerDeprecated underBar row spacing>
        {childSubscription && (
          <Col col={5}>
            <TvChannel
              key={childSubscription.plan.product.id}
              title={childSubscription.plan.product.title}
              price={
                childSubscription.nextChargeAmount
                  ? formatPrice(childSubscription.nextChargeAmount)
                  : ''
              }
              activeUntil={`${
                hasBeenCancelled ? t('novaTv.activeUntil') : t('novaTv.nextRenewal')
              }:`}
              activeUntilDate={formatDate(
                childSubscription.currentPeriodEnd as Date,
                'd. MMMM yyyy',
              )}
              imageSrc={childSubscription?.plan?.product?.image?.url}
              {...(childSubscription?.plan?.id === 'P0019' && {
                secondaryButton: {
                  onClick: () => window.open('https://sjonvarp.siminn.is', '_blank'),
                  text: 'Horfa í vafra',
                  icon: 'arrowRight',
                  colorScheme: 'black100',
                },
              })}
              background="white"
              border
              borderColor="grey100"
              showDotShadow
              {...(childSubscription?.plan?.id === 'P0019' &&
                isStaff && {
                  buttonText: t('ssp.moreDetails'),
                  onSelect: () => setModalOpen(true),
                })}
            />
          </Col>
        )}
      </ContainerDeprecated>
    </Wrapper>
  );
};

Askrift.getInitialProps = ({ query }: IContext) => {
  const { subscriptionId, childSubscriptionId } = query;

  return {
    subscriptionId,
    namespacesRequired: ['common', 'subscription'],
    childSubscriptionId,
  };
};

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