import React, { useRef, useState } from 'react';
import { BaseButton, Box, SecondaryButton, Text, useViewport } from '@nova-hf/ui';
import questionMark from 'assets/images/mobile-signup/Spurningamerki.png';
import { Select } from 'frisco';
import Modal from 'frisco/Modal/Modal';
import { inject, observer } from 'mobx-react';
import Image from 'next/image';
import MobileSignup, { MobileSignupProducts } from 'store/mobileSignup';

type SubscriptionQuestionsProps = {
  mobileSignup?: MobileSignup;
};

const SubscriptionQuestion = ({ mobileSignup }: SubscriptionQuestionsProps) => {
  const [isActive, setIsActive] = useState(false);
  const ref = useRef<HTMLElement>(null);
  const { isSmall } = useViewport();

  const services =
    mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Askrift
      ? mobileSignup.askriftMonthly
      : mobileSignup?.frelsiMobileMonthly;

  const fiveG = services?.find((item) => item?.variantDetails?.id.includes('-5gb'));

  const twentyFive = services?.find((item) => item?.variantDetails?.id.includes('-25gb'));

  const hundred = services?.find((item) => item?.variantDetails?.id.includes('-100gb'));

  const onSubmit = () => {
    setIsActive(false);
    if (mobileSignup?.selectedQuestionVariant?.includes('-5gb') && fiveG?.variantDetails?.id) {
      mobileSignup?.setSecondaryVariant(fiveG.variantDetails.id);
    }
    if (
      mobileSignup?.selectedQuestionVariant?.includes('-25gb') &&
      twentyFive?.variantDetails?.id
    ) {
      mobileSignup?.setSecondaryVariant(twentyFive.variantDetails.id);
    }
    if (mobileSignup?.selectedQuestionVariant?.includes('-100gb') && hundred?.variantDetails?.id) {
      mobileSignup?.setSecondaryVariant(hundred.variantDetails.id);
    }
  };

  return (
    <Box
      display="flex"
      backgroundColor="grey900"
      justifyContent="space-between"
      alignItems="center"
      paddingRight={1}
      borderRadius="16px"
      height={8}
      position="relative"
      overflow="hidden"
      ref={ref}
      gap={1}
      marginBottom={2}
    >
      <Modal isActive={isActive} setIsActive={setIsActive}>
        <Modal.Header title="Hraðstefnumót" subtitle="Hvernig myndirðu lýsa þér?" />
        <Box display="flex" flexDirection="column">
          <Select
            isSelected={!!mobileSignup?.selectedQuestionVariant?.includes('-5gb')}
            title={'Neibb'}
            subtitle="Ég er mikið í símanum og á netinu úti um allt. Ég hlusta á tónlist eða horfi á þætti í símanum."
            emoji="disco"
            onClick={() => {
              mobileSignup?.setSelectedQuestionVariant('-5gb');
            }}
          />
          <Select
            isSelected={!!mobileSignup?.selectedQuestionVariant?.includes('-25gb')}
            title={'Mehh'}
            subtitle="Ég fer á netið, samfélagsmiðla og hlusta á tónlist á ferðinni. Bla bla bla bla bla bla bla."
            emoji="card"
            onClick={() => {
              mobileSignup?.setSelectedQuestionVariant('-25gb');
            }}
          />
          <Select
            isSelected={!!mobileSignup?.selectedQuestionVariant?.includes('-100gb')}
            title={'Vó'}
            subtitle="Ég er mikið í símanum og á netinu úti um allt. Ég hlusta á tónlist eða horfi á þætti í símanum."
            emoji={'bank'}
            onClick={() => {
              mobileSignup?.setSelectedQuestionVariant('-100gb');
            }}
          />
        </Box>

        <SecondaryButton colorScheme="pink" text={'Áfram'} onClick={() => onSubmit()} />
      </Modal>
      <Box display="flex" justifyContent="space-between" width="100%">
        <Box display="flex" alignItems="center" minWidth={7}>
          <Image src={questionMark} alt={'shurg'} width={56} height={56} objectFit="cover" />
        </Box>

        <Box
          display="flex"
          alignItems="center"
          zIndex="megamenu"
          width={{ sm: 'auto', lg: '10/12' }}
          flexGrow={1}
        >
          <Text color={'white'} variant={isSmall ? 'pSmallRegular' : 'pMediumRegular'}>
            Ertu óviss?
          </Text>
        </Box>
        <Box paddingY={2} paddingX={2} style={{ whiteSpace: 'nowrap' }}>
          <BaseButton color="white" onClick={() => setIsActive(true)}>
            <Text variant="button" color="white" style={{ textDecoration: 'underline' }}>
              Taktu prófið
            </Text>
          </BaseButton>
        </Box>
      </Box>
    </Box>
  );
};

export default inject('mobileSignup')(observer(SubscriptionQuestion));