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

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

type RouterInfoProps = {
  color: string;
  router: Router;
  isLoading: boolean;
};

export const RouterInfo = ({ color, router, isLoading }: RouterInfoProps) => {
  const { t } = useTranslation('fiber');

  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={{ sm: 1, md: 3 }}>
      <Box
        display="flex"
        justifyContent="space-between"
        flexDirection={{ sm: 'column', md: 'row' }}
        marginBottom={6}
      >
        <Box width={{ sm: '100%', md: '7/12' }}>
          <Box>
            <Text variant="eyebrowMedium" color="grey600">
              {t('routerStatus.troubleShooting.eyeBrow')}
            </Text>
          </Box>
          <Box marginBottom={2}>
            <Text variant="eyebrowLarge" color="black100">
              {router.organizationName}
            </Text>
          </Box>
          <Box marginBottom={2}>
            <ul>
              {Object.keys(router).map((key) => {
                const displayItems = ['mac', 'ip', 'sn', 'ssid'];

                if (displayItems.includes(key)) {
                  return (
                    <li key={key}>
                      <Text variant="pMediumRegular" color="black100">
                        {key.toUpperCase()}: {router[key]}
                      </Text>
                    </li>
                  );
                }
              })}
            </ul>
          </Box>
          <Box marginBottom={2}>
            <Text variant="pMediumRegular" color="black100">
              {t('routerStatus.troubleShooting.insturction')}
              <br />
              <br />
              {t('routerStatus.troubleShooting.description')}
            </Text>
          </Box>
        </Box>
        <Box width={{ sm: '8/12', md: '5/12' }} marginLeft={{ sm: '2/12', md: undefined }}>
          <img
            src="https://images.ctfassets.net/j5d5y4z9f7ki/7DdQzzS3ZsfqcM7sinnPO1/6289e643ba8e88da18bec9ad58b95754/Group_1443.png"
            alt={router.organizationName || 'router'}
          />
        </Box>
      </Box>
      {/*<Box marginBottom={6}>
        <Grid>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <KPICard stat="69%" description="general health" color={color as MainColorType} />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <KPICard
              stat="470"
              description="Days since last turned off"
              color={color as MainColorType}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <KPICard
              stat="2023.09.08"
              description="Recommended date to update"
              color={color as MainColorType}
            />
          </GridItem>
        </Grid>
      </Box>*/}

      {router.isNovaRouter ? (
        <>
          {/*<Box id="actions" marginBottom={6}>
            <Box marginBottom={2}>
              <Text variant="pLargeBold">Aðgerðir</Text>
            </Box>
            <Box display="flex" flexDirection={{ sm: 'column', md: 'row' }}>
              <Box width="100%" marginRight={{ md: 1 }} marginBottom={{ sm: 2, md: undefined }}>
                <MainButton
                  colorScheme={'white'}
                  text="Endurræsa"
                  dottedShadow="none"
                  icon="longArrowRight"
                  onClick={() => console.log('restart')}
                />
              </Box>
              <Box width="100%" marginLeft={{ md: 1 }} marginBottom={{ sm: 2, md: undefined }}>
                <MainButton
                  colorScheme={'white'}
                  text="Athuga samband"
                  dottedShadow="none"
                  icon="longArrowRight"
                  onClick={() => console.log('Athuga samband')}
                />
              </Box>
            </Box>
          </Box>*/}
          <Box marginBottom={6}>
            <Box>
              <Box marginY={2}>
                <SimpleAccordion
                  title={t('routerStatus.simpleAccordion.power.title')}
                  color={color as MainColorType}
                >
                  <Box
                    display="flex"
                    gap={1}
                    flexDirection="column"
                    paddingX={[3, 3, 8]}
                    paddingBottom={3}
                  >
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.power.on.title')}
                      description={t('routerStatus.simpleAccordion.power.on.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.power.off.title')}
                      description={t('routerStatus.simpleAccordion.power.off.description')}
                    />
                  </Box>
                </SimpleAccordion>
              </Box>
              <Box marginY={2}>
                <SimpleAccordion
                  title={t('routerStatus.simpleAccordion.wan.title')}
                  color={color as MainColorType}
                >
                  <Box
                    display="flex"
                    gap={1}
                    flexDirection="column"
                    paddingX={[3, 3, 8]}
                    paddingBottom={3}
                  >
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.wan.on.title')}
                      description={t('routerStatus.simpleAccordion.wan.on.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.wan.off.title')}
                      description={t('routerStatus.simpleAccordion.wan.off.description')}
                    />
                  </Box>
                </SimpleAccordion>
              </Box>
              <Box marginY={2}>
                <SimpleAccordion
                  title={t('routerStatus.simpleAccordion.internet.title')}
                  color={color as MainColorType}
                >
                  <Box
                    display="flex"
                    gap={1}
                    flexDirection="column"
                    paddingX={[3, 3, 8]}
                    paddingBottom={3}
                  >
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.internet.on.title')}
                      description={t('routerStatus.simpleAccordion.internet.on.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.internet.off.title')}
                      description={t('routerStatus.simpleAccordion.internet.off.description')}
                    />
                  </Box>
                </SimpleAccordion>
              </Box>
              <Box marginY={2}>
                <SimpleAccordion
                  title={t('routerStatus.simpleAccordion.wlan.title')}
                  color={color as MainColorType}
                >
                  <Box
                    display="flex"
                    gap={1}
                    flexDirection="column"
                    paddingX={[3, 3, 8]}
                    paddingBottom={3}
                  >
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.wlan.on.title')}
                      description={t('routerStatus.simpleAccordion.wlan.on.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.wlan.blinking.title')}
                      description={t('routerStatus.simpleAccordion.wlan.blinking.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.wlan.off.title')}
                      description={t('routerStatus.simpleAccordion.wlan.off.description')}
                    />
                  </Box>
                </SimpleAccordion>
              </Box>
              <Box marginY={2}>
                <SimpleAccordion
                  title={t('routerStatus.simpleAccordion.lan.title')}
                  color={color as MainColorType}
                >
                  <Box
                    display="flex"
                    gap={1}
                    flexDirection="column"
                    paddingX={[3, 3, 8]}
                    paddingBottom={3}
                  >
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.lan.on.title')}
                      description={t('routerStatus.simpleAccordion.lan.on.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.lan.blinking.title')}
                      description={t('routerStatus.simpleAccordion.lan.blinking.description')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.simpleAccordion.lan.off.title')}
                      description={t('routerStatus.simpleAccordion.lan.off.description')}
                    />
                  </Box>
                </SimpleAccordion>
              </Box>
            </Box>
          </Box>
        </>
      ) : (
        <>
          <Box marginBottom={4}>
            <Text variant="pLargeBold">{t('routerStatus.otherRouter.title')}</Text>
            <Text>{t('routerStatus.otherRouter.description')}</Text>
            <Box renderAs="ul" marginLeft={5}>
              <Box renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
                <Text>{t('routerStatus.otherRouter.steps.one')}</Text>
              </Box>
              <Box renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
                <Text>{t('routerStatus.otherRouter.steps.two')}</Text>
              </Box>
              <Box renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
                <Text>{t('routerStatus.otherRouter.steps.three')}</Text>
              </Box>
              <Box renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
                <Text>{t('routerStatus.otherRouter.steps.four')}</Text>
              </Box>
            </Box>
            <Box>
              <Box marginY={2}>
                <SimpleAccordion title="Power" color={color as MainColorType}>
                  <Box paddingX={[3, 3, 8]} paddingBottom={3}>
                    <GlowingConnectionStatus
                      title={t('routerStatus.otherRouter.simpleAccordion.power.on.title')}
                      isConnected
                    />
                    <GlowingConnectionStatus
                      title={t('routerStatus.otherRouter.simpleAccordion.power.off.title')}
                      description={t(
                        'routerStatus.otherRouter.simpleAccordion.power.off.description',
                      )}
                    />
                    <Box renderAs="ul" marginLeft={5}>
                      <Box renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
                        <Text variant="pMediumRegular">
                          {t('routerStatus.otherRouter.simpleAccordion.bullets.one')}
                        </Text>
                      </Box>
                      <Box renderAs="li" style={{ listStyle: 'disc' }} marginBottom={1}>
                        <Text variant="pMediumRegular">
                          {t('routerStatus.otherRouter.simpleAccordion.bullets.two')}
                        </Text>
                      </Box>
                    </Box>
                  </Box>
                </SimpleAccordion>
              </Box>
            </Box>
          </Box>
        </>
      )}
      <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>
  );
};