import React from 'react';
import { Box, Grid, GridItem, LoadingPlaceholder, SimpleAccordion, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { ExternalBox } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { ConnectionStatus, GlowingConnectionStatus } from './ConnectionStatus';
import { GetHelpButtons } from './GetHelpButtons';

const dateTypeToString = (uptimeUnit: string) => {
  switch (uptimeUnit) {
    case 'Y':
      return 'Ár';
    case 'W':
      return 'Vikur';
    case 'M':
      return 'Mán';
    case 'D':
      return 'Dagar';
    case 'h':
      return 'klst';
    case 'm':
      return 'mín';
    case 's':
      return 'sek';
    default:
      return '-';
  }
};

const BulletList = ({ listItems }: { listItems: Array<string> }) => {
  return (
    <Box renderAs="ul" marginLeft={5}>
      {listItems.map((item, i) => (
        <Box key={`${i}__${item}`} renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
          <Text variant="pMediumRegular">{item}</Text>
        </Box>
      ))}
    </Box>
  );
};

export const FiberBoxContent = ({
  isPort1Connected,
  isPort2Connected,
  isPort3Connected,
  isPort4Connected,
  port1SpeedInfo,
  port2SpeedInfo,
  port3SpeedInfo,
  port4SpeedInfo,
  isLoading,
  isBoxActive,
  uptime,
  color,
}: Omit<ExternalBox, 'mac'> & { color: string; isLoading: boolean }) => {
  const { t } = useTranslation('fiber');
  const uptimeTimes = uptime.split(/[a-z]/gi).filter(Boolean);
  const uptimeUnits = uptime.split(/[0-9]/).filter(Boolean);

  if (isLoading) {
    return (
      <Box padding={{ sm: 1, md: 3 }}>
        <Box marginBottom={2}>
          <LoadingPlaceholder width="5/12" height={4} />
        </Box>
        <Box>
          <LoadingPlaceholder width="100%" height={12} />
        </Box>
      </Box>
    );
  }

  return (
    <Box padding={3}>
      <Grid gridTemplate={9}>
        <GridItem gridColumn={{ sm: '1/12', md: '1/6' }}>
          <Box>
            <Text variant="pMediumBold">{t('fiberBoxContent.troubleShooting.eyeBrow')}</Text>
            <Text variant="pMediumRegular">{t('fiberBoxContent.troubleShooting.description')}</Text>
          </Box>
        </GridItem>
        <GridItem gridColumn={{ sm: '1/12', md: '8/12' }}>
          <Box
            renderAs="img"
            src="https://images.ctfassets.net/j5d5y4z9f7ki/1rCyltTru5IMPfctNrgFYj/142686c9e1964f045671ba7d5c015fa5/Group_1442.png"
            maxWidth="100%"
            maxHeight={[30, '100%']}
            style={{ margin: '0 auto' }}
          />
        </GridItem>
      </Grid>
      <Box marginTop={3} marginBottom={2}>
        <SimpleAccordion
          color="black100"
          icon="power"
          title={t('fiberBoxContent.simpleAccordion.power.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.power.on.title')}
              description={t('fiberBoxContent.simpleAccordion.power.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.power.off.title')}
              description={t('fiberBoxContent.simpleAccordion.power.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.power.listItems.0'),
                t('fiberBoxContent.simpleAccordion.power.listItems.1'),
                t('fiberBoxContent.simpleAccordion.power.listItems.2'),
              ]}
            />
          </Box>
        </SimpleAccordion>
        <SimpleAccordion
          color="black100"
          icon="arrowsLeftRight"
          title={t('fiberBoxContent.simpleAccordion.link.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.link.on.title')}
              description={t('fiberBoxContent.simpleAccordion.link.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.link.off.title')}
              description={t('fiberBoxContent.simpleAccordion.link.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.link.listItems.0'),
                t('fiberBoxContent.simpleAccordion.link.listItems.1'),
              ]}
            />
          </Box>
        </SimpleAccordion>
        <SimpleAccordion
          color="black100"
          icon="oppositeArrows"
          title={t('fiberBoxContent.simpleAccordion.data.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.data.on.title')}
              description={t('fiberBoxContent.simpleAccordion.data.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.data.off.title')}
              description={t('fiberBoxContent.simpleAccordion.data.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.data.listItems.0'),
                t('fiberBoxContent.simpleAccordion.data.listItems.1'),
                t('fiberBoxContent.simpleAccordion.data.listItems.2'),
                t('fiberBoxContent.simpleAccordion.data.listItems.3'),
              ]}
            />
          </Box>
        </SimpleAccordion>
      </Box>

      <Box
        display="flex"
        flexDirection={{ sm: 'column', lg: 'row' }}
        gap={1}
        borderColor="grey200"
        borderStyle="solid"
        borderWidth="1px"
        padding={3}
        alignItems={{ sm: 'flex-start', lg: 'center' }}
        justifyContent={{ sm: 'flex-start', lg: 'space-between' }}
        marginBottom={{ sm: 3, lg: 5 }}
      >
        <Box width="50%">
          <Text renderAs="div" variant="eyebrowMedium" color="grey600" marginBottom={1}>
            {t('fiberBoxContent.ports.title')}
          </Text>
          <ConnectionStatus
            title={t('fiberBoxContent.ports.port1')}
            isConnected={isPort1Connected}
            speed={port1SpeedInfo}
          />
          <ConnectionStatus
            title={t('fiberBoxContent.ports.port2')}
            isConnected={isPort2Connected}
            speed={port2SpeedInfo}
          />
          <ConnectionStatus
            title={t('fiberBoxContent.ports.port3')}
            isConnected={isPort3Connected}
            speed={port3SpeedInfo}
          />
          <ConnectionStatus
            title={t('fiberBoxContent.ports.port4')}
            isConnected={isPort4Connected}
            speed={port4SpeedInfo}
          />
          <ConnectionStatus title={t('fiberBoxContent.ports.uplink')} isConnected={isBoxActive} />
        </Box>
        <Box display="flex" gap={2}>
          {uptime &&
            uptimeTimes.map((number, i) => {
              return (
                <Box
                  key={`${i}__${number}`}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  borderColor="grey200"
                  borderStyle="solid"
                  borderWidth="1px"
                  borderRadius="medium"
                  width={7}
                  height={9}
                >
                  <Box>
                    <Text variant="pLargeBold" textAlign="center">
                      {number}
                    </Text>
                    <Text variant="eyebrowSmall" color="grey400" textAlign="center">
                      {dateTypeToString(uptimeUnits[i])}
                    </Text>
                  </Box>
                </Box>
              );
            })}
        </Box>
      </Box>
      <GetHelpButtons
        color={color as MainColorType}
        href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
      />
    </Box>
  );
};