import React from 'react';
import { Button } from '@nova-hf/ui';
import SVGArrow from 'assets/svg/arrow.svg';
import SVGInternet from 'assets/svg/svg24/Internet4g_24px.svg';
import SVGWifi from 'assets/svg/svg24/Wifi_24px.svg';
import SVGPhone from 'assets/svg/svg48/Mobile_48px.svg';
import SVGForwarding from 'assets/svg/svg48/Mobile-Return_48px.svg';
import classNames from 'classnames/bind';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { IConnection } from 'typings';

import s from './ConnectionDetails.module.scss';

const cn = classNames.bind(s);

interface IConnectionDetailsProps {
  color: string;
  title: string;
  subtitle?: string;
  headerLink?: string;
  betaLink?: string;
  connectionType: ConnectionTypeType;
  description: string;
  buttonText: string;
  onClick: () => void;
  className?: string;
}

type ConnectionTypeType = IConnection['type'];

const connectionIcon = (type: ConnectionTypeType, color = '') => {
  switch (type) {
    case 'Mobile':
      return <SVGPhone className={cn(s.connectionDetails__svg, `color-${color}`)} />;
    case 'Internet':
      return <SVGWifi className={cn(s.connectionDetails__svg, `color-${color}`)} />;
    case 'CallForwarding':
      return <SVGForwarding className={cn(s.connectionDetails__svg, `color-${color}`)} />;
    case 'BackupConnection':
      return <SVGInternet className={cn(s.connectionDetails__svg, `color-${color}`)} />;
    default:
      break;
  }
};

const headerContent = (title: string, subtitle: string | undefined, type: ConnectionTypeType) => {
  return (
    <>
      <div className={s.connectionDetails__titleIconContainer}>{connectionIcon(type, 'white')}</div>
      <div className={s.connectionDetails__titleTextContainer}>
        <div className={s.connectionDetails__title}>{title}</div>
        {subtitle && <div className={s.connectionDetails__subtitle}>{subtitle}</div>}
      </div>
    </>
  );
};

export const ConnectionDetails: React.FunctionComponent<IConnectionDetailsProps> = (props) => {
  const {
    color,
    title,
    subtitle,
    headerLink,
    betaLink,
    connectionType,
    onClick,
    description,
    buttonText,
    className,
  } = props;

  const betaClick = () => {
    if (betaLink) {
      window.location.href = betaLink;
    }
  };

  return (
    <div className={cn(s.connectionDetails, className)}>
      {headerLink ? (
        <LinkWrapper
          className={cn(s.connectionDetails__header, 'link', `color-${color}`)}
          href={headerLink}
        >
          {headerContent(title, subtitle, connectionType)}
          <div className={s.connectionDetails__titleArrow}>
            <SVGArrow className={s.connectionDetails__titleArrowSVG} />
          </div>
        </LinkWrapper>
      ) : betaLink ? (
        <div
          className={cn(s.connectionDetails__header, 'link', `color-${color}`)}
          onClick={betaClick}
        >
          {headerContent(title, subtitle, connectionType)}
          <div className={s.connectionDetails__titleArrow}>
            <SVGArrow className={s.connectionDetails__titleArrowSVG} />
          </div>
        </div>
      ) : (
        <div className={cn(s.connectionDetails__header, `color-${color}`)}>
          {headerContent(title, subtitle, connectionType)}
        </div>
      )}

      <div className={cn(s.connectionDetails__contentContainer, `color-${color}`)}>
        {description && <div className={s.connectionDetails__description}>{description}</div>}

        {onClick && (
          <Button background="white" text="dark" big fill noShadow onClick={onClick}>
            {buttonText}
          </Button>
        )}
      </div>
    </div>
  );
};