import * as React from 'react';

import { Box, Input, Text, MainButton } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { inject } from 'mobx-react';

interface IRouterSettingsProps {
  subscriptionId?: string;
  color: MainColorType;
}

// This is currently only a layout mock up
export const RouterSettings = ({ color }: IRouterSettingsProps) => {
  return (
    <Box padding={4} marginX={{ sm: 0, md: 5 }} marginBottom={4}>
      <Box marginBottom={4}>
        <Text color="black100" variant="pMediumRegular">
          Athugið: Ef ráterinn er útvegaður af Nova, höldum við áfram að rukka reikninginn þar til
          ráternum er skilað til Nova.
        </Text>
      </Box>
      <Box marginBottom={4}>
        <Box marginBottom={4}>
          <Text color="black100" variant="subtitleBold">
            Bæta við ráter
          </Text>
          <Text color="black100" variant="pMediumRegular">
            Hér geturðu virkjað ráter, hvort sem hann er frá Nova eða þinn eiginn.
          </Text>
        </Box>
        <Box width={{ sm: '100%', md: '6/12' }} marginBottom={3}>
          <Input
            id="router number"
            name="router number"
            type="number"
            autoComplete="on"
            defaultValue=""
            label="Raðnúmer beinis"
            color={color}
          />
        </Box>
        <Box width={{ sm: '100%', md: '6/12' }}>
          <MainButton text="Bæta við Ráter" colorScheme={color} icon="add" />
        </Box>
      </Box>
      <Box>
        <Box marginBottom={4}>
          <Box>
            <Text color="black100" variant="subtitleBold">
              Fjarlægja ráter
            </Text>
          </Box>
          <Text color="black100" variant="pMediumRegular">
            Hér getur þú fjarlægt ráter, hvort sem það er frá Nova eða þínum eigin.
          </Text>
        </Box>
        <Box width={{ sm: '100%', md: '6/12' }} marginBottom={3}>
          <Input
            id="router number"
            name="router number"
            type="number"
            autoComplete="on"
            defaultValue=""
            label="Raðnúmer beinis"
            color={color}
          />
        </Box>
        <Box width={{ sm: '100%', md: '6/12' }}>
          <MainButton text="Bæta við Ráter" colorScheme={color} icon="close" isDisabled />
        </Box>
      </Box>
    </Box>
  );
};
export default inject('authentication')(RouterSettings);