import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { SimCardType } from 'typings/graphql';

import { MobileChildrenProps } from '../kaupa/StepSetup';

const DesktopCartOverview = ({
  mobileSignup,
  cart,
  authentication,
}: Pick<MobileChildrenProps, 'mobileSignup' | 'cart' | 'authentication'>) => {
  const contactName = authentication?.isStaff ? cart?.customerName : authentication?.username;
  const phoneNumber = mobileSignup?.simCardPurchaseInfo.phoneNumber;
  const simcardType = mobileSignup?.simCardPurchaseInfo.simCardType;
  const simcard: string =
    typeof simcardType === 'undefined'
      ? ''
      : simcardType === SimCardType.ESim
      ? 'eSim'
      : 'Plast kort';

  const relevantInfo =
    mobileSignup?.primaryVariant &&
    mobileSignup.secondaryVariant &&
    `${mobileSignup?.getVariantName(mobileSignup.primaryVariant)}: ${mobileSignup?.getVariantName(
      mobileSignup?.secondaryVariant,
    )}`;
  return (
    <Box>
      <Box>
        <Text variant="subHeading">Fyrirsögn um statusinn</Text>
      </Box>
      <Box display="flex" flexDirection="column" marginTop={5}>
        {(authentication?.isStaff || cart?.customerName) && (
          <DesktopCartItem
            isActive={!!contactName}
            title={'Greiðandi'}
            relevantInfo={contactName ?? ''}
          />
        )}
        <DesktopCartItem
          isActive={!!mobileSignup?.primaryVariant}
          title={'Þjónustuleið'}
          relevantInfo={relevantInfo ?? ''}
        />

        <DesktopCartItem
          isActive={!!phoneNumber}
          title={'Símanúmer'}
          relevantInfo={phoneNumber ?? ''}
        />
        <DesktopCartItem isActive={!!simcard} title={'Simkort'} relevantInfo={simcard ?? ''} />
      </Box>
    </Box>
  );
};

type DesktopCartItemProps = {
  isActive: boolean;
  title: string;
  relevantInfo: string;
};

const DesktopCartItem = ({ isActive, title, relevantInfo }: DesktopCartItemProps) => (
  <Box display="flex" paddingY={2}>
    <Box marginRight={2}>
      <Box height={3} width={3} borderRadius={{ sm: 'xLarge' }} backgroundColor={'grey500'}>
        <Box color="black100" style={{ transform: 'translate(4px, -15px)' }} fontSize={'h6'}>
          {isActive ? '✔' : ''}
        </Box>
      </Box>
    </Box>
    <Box display="flex" flexDirection="column">
      <Text variant="subtitleBold">{title}</Text>
      <Box height={3}>
        <Text variant="pLargeRegular" color="grey600">
          {relevantInfo || ''}
        </Text>
      </Box>
    </Box>
  </Box>
);

export default inject('mobileSignup', 'cart', 'authentication')(observer(DesktopCartOverview));