import React from 'react';
import { ActionButton, Box, Grid, GridItem } from '@nova-hf/ui';
import Link from 'next/link';
import Profile from 'store/models/Profile';

type FiberShortcutsProps = {
  color: string;
  profile: Profile;
};

export const FiberShortcuts = ({ color = 'pink', profile }: FiberShortcutsProps) => {
  return (
    <Box marginBottom={3}>
      <Grid gridTemplate={[1, 2, 4]}>
        {profile.rateplan.shortTitle !== 'AlltSaman' &&
          profile.rateplan.shortTitle !== 'Hradleid' && (
            <>
              <GridItem>
                <ActionButton
                  size="large"
                  width="100%"
                  colorScheme={color}
                  icon="mobile"
                  text="NET:/net"
                  wrapper={(link) => (
                    <a
                      href={`https://innri.tankar.local/farsimi/askrift/netnet/${profile.ssn}/${profile.ssn}/${profile.title}/komdu/1/`}
                      target="blank_"
                    >
                      {link}
                    </a>
                  )}
                />
              </GridItem>
              <GridItem>
                <ActionButton
                  size="large"
                  width="100%"
                  colorScheme={color}
                  icon="return"
                  text="Skipta um þjónustuleið"
                  wrapper={(link) => (
                    <Link
                      href={`/${profile.ssn}/thjonusta/${profile.subscriptionId}/stillingar/thjonustuleid`}
                      passHref
                      legacyBehavior
                    >
                      {link}
                    </Link>
                  )}
                />
              </GridItem>
            </>
          )}
        <GridItem>
          <ActionButton
            size="large"
            width="100%"
            colorScheme={color}
            icon="location"
            text="Flytja tengingu"
            wrapper={(link) => (
              <Link
                href={`/${profile.ssn}/thjonusta/${profile.subscriptionId}/stillingar/flutningur`}
                passHref
                legacyBehavior
              >
                {link}
              </Link>
            )}
          />
        </GridItem>

        <GridItem>
          <ActionButton
            size="large"
            width="100%"
            colorScheme={color}
            icon="creditcardOff"
            text="Segja upp tengingu"
            wrapper={(link) => (
              <a href={`https://fiberresign.nova.is/?msisdn=${profile.title}`} target="blank_">
                {link}
              </a>
            )}
          />
        </GridItem>
      </Grid>
    </Box>
  );
};