import React, { useCallback } from 'react';
import { Box, StepAccordion, Text } from '@nova-hf/ui';
import { PillProps } from '@nova-hf/ui/umd/ts/src/pill/Pill';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Profile from 'store/models/Profile';
import { useFiberEquipmentQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { FiberBoxContent } from './FiberBoxContent';
import { GetHelpButtons } from './GetHelpButtons';
import { RouterInfo } from './RouterInfo';

type StepAccordionPillProps = {
  pill: PillProps;
  status: 'loading' | 'attention' | 'success' | 'warning' | 'none';
};

type FiberStatusProps = {
  subscriptionId: string;
  color: string;
  profile: Profile;
};

export const FiberStatus = ({ subscriptionId, color, profile }: FiberStatusProps) => {
  const { data, loading } = useFiberEquipmentQuery({
    variables: { input: { subscriptionId } },
  });
  const { t } = useTranslation('fiber');

  const connectedRouter = data?.fiberEquipment?.connectedRouters?.[0];

  const fiberBox = data?.fiberEquipment?.externalBox;

  const formatPortSpeed = (portSpeed: string): string => {
    const speed = portSpeed.match(/\([^\)]+\)/g)?.[0]?.replace(/[()]/g, '');
    return !isNaN(Number(speed)) ? `(${speed}Mbps)` : '';
  };

  const profileStatusMap = useCallback((): StepAccordionPillProps => {
    if (!profile) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.profile.pill.noProfile') },
        status: 'attention',
      };
    }
    if (profile.statusCode === 'signup') {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.profile.pill.signup') },
        status: 'loading',
      };
    }
    if (profile.statusCode === 'active') {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.profile.pill.active') },
        status: 'success',
      };
    } else {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.profile.pill.notOK') },
        status: 'success',
      };
    }
  }, [profile]);

  const fiberStatusMap = useCallback((): StepAccordionPillProps => {
    if (loading) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.fiber.pill.loading') },
        status: 'loading',
      };
    }
    if (!fiberBox) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.fiber.pill.noFiber') },
        status: 'loading',
      };
    }
    if (fiberBox?.isBoxActive) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.fiber.pill.active') },
        status: 'success',
      };
    } else {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.fiber.pill.notOK') },
        status: 'warning',
      };
    }
  }, [loading, fiberBox]);

  const routerStatusMap = (): StepAccordionPillProps => {
    if (loading) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.router.pill.loading') },
        status: 'loading',
      };
    }
    if (!connectedRouter) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.router.pill.noConnectedRouter') },
        status: 'loading',
      };
    }
    if (!connectedRouter?.isNovaRouter) {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.router.pill.notNovaRouter') },
        status: 'none',
      };
    }
    if (connectedRouter?.connectionState?.isActive) {
      return {
        pill: { maxWidth: 25, text: ` ${t('fiberStatus.stepAccordion.router.pill.active')}` },
        status: 'success',
      };
    } else {
      return {
        pill: { maxWidth: 25, text: t('fiberStatus.stepAccordion.router.pill.notOK') },
        status: 'warning',
      };
    }
  };

  return (
    <Box marginBottom={8}>
      <StepAccordion
        stepNumber={1}
        title={t('fiberStatus.stepAccordion.core.title')}
        pill={{ maxWidth: 25, text: t('fiberStatus.stepAccordion.core.pill') }}
        icon="home"
        status="success"
        disabled={true}
      >
        <Box />
      </StepAccordion>
      <StepAccordion
        stepNumber={2}
        title={t('fiberStatus.stepAccordion.profile.title')}
        icon="novaLogo"
        disabled={true}
        {...profileStatusMap()}
      >
        <Box />
      </StepAccordion>
      <StepAccordion
        stepNumber={3}
        title={t('fiberStatus.stepAccordion.fiber.title')}
        icon="globe"
        {...fiberStatusMap()}
      >
        {fiberBox ? (
          <FiberBoxContent
            isPort1Connected={fiberBox?.isPort1Connected || false}
            port1SpeedInfo={formatPortSpeed(fiberBox?.port1SpeedInfo)}
            isPort2Connected={fiberBox?.isPort2Connected || false}
            port2SpeedInfo={formatPortSpeed(fiberBox?.port2SpeedInfo)}
            isPort3Connected={fiberBox?.isPort3Connected || false}
            port3SpeedInfo={formatPortSpeed(fiberBox?.port3SpeedInfo)}
            isPort4Connected={fiberBox?.isPort4Connected || false}
            port4SpeedInfo={formatPortSpeed(fiberBox?.port4SpeedInfo)}
            isBoxActive={fiberBox?.isBoxActive || false}
            isLoading={loading}
            uptime={fiberBox?.uptime || ''}
            color={color}
          />
        ) : loading ? (
          t('fiberStatus.fiberBoxLoading')
        ) : (
          <Box>
            <Text>{t('fiberStatus.fiberBoxNotFound')}</Text>
            <Box marginBottom={2}>
              <GetHelpButtons
                color={color as MainColorType}
                href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
              />
            </Box>
          </Box>
        )}
      </StepAccordion>

      <StepAccordion
        stepNumber={4}
        title={t('fiberStatus.stepAccordion.router.title')}
        icon="system"
        isLastItem={true}
        {...routerStatusMap()}
      >
        {connectedRouter ? (
          <RouterInfo color={color} router={connectedRouter} isLoading={loading} />
        ) : loading ? (
          t('fiberStatus.routerLoading')
        ) : (
          <Box>
            <Text>{t('fiberStatus.routerNotFound')}</Text>
            <Box marginBottom={2}>
              <GetHelpButtons
                color={color as MainColorType}
                href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
              />
            </Box>
          </Box>
        )}
      </StepAccordion>
    </Box>
  );
};