import React from 'react';
import SVGArrow from 'assets/svg/arrow.svg';
import SVGArrowRight from 'assets/svg/arrow-right.svg';
import SVGPlus from 'assets/svg/plus.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 SVGWifiHouse from 'assets/svg/wifihouse.svg';
import classNames from 'classnames/bind';
import { IConnection } from 'typings';

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

const cn = classNames.bind(s);

interface IConnectionItemProps {
  color: string;
  selected: boolean;
  onSelect: () => void;
  type: ConnectionTypeType;
  title: string;
  description: string;
  isActive: boolean;
  className?: string;
}

type ConnectionTypeType = IConnection['type'];

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

export const ConnectionItem: React.FunctionComponent<IConnectionItemProps> = (props) => {
  const {
    color,
    selected,
    onSelect,
    type,
    title = 'Laust sæti',
    description,
    isActive,
    className,
  } = props;

  return (
    <>
      <button
        className={cn(
          s.connectionItem,
          `box-shadow-${color}`,
          !isActive && s.connectionItem__inactive,
          { selected },
          className,
        )}
        onClick={onSelect}
      >
        <div className={cn(s.icon)}>{connectionIcon(type, color)}</div>
        <div className={s.info}>
          <div className={cn(s.info__title)}>{title}</div>
          <div className={cn(isActive ? s.info__content : s.info__contentInactive)}>
            {description}
          </div>
        </div>
        <div className={s.arrow}>
          <SVGArrow />
        </div>
      </button>
    </>
  );
};

interface IAddConnectionProps {
  description: string;
  title?: string;
  type: ConnectionTypeType;
  onClick?: () => void;
  color?: string;
  className?: string;
  arrow?: boolean;
}

export const AddConnectionItem: React.FunctionComponent<IAddConnectionProps> = (props) => {
  const { title, description, type, onClick, color = 'dark', className, arrow } = props;

  return (
    <>
      <div className={cn(s.connectionItem, `box-shadow-${color}`, className)} onClick={onClick}>
        <div className={cn(s.icon)}>{connectionIcon(type, color)}</div>
        <div className={s.info}>
          <div className={cn(s.info__title, { add: true })}>{title}</div>
          <div className={cn(s.info__content)}>{description}</div>
        </div>
        {onClick && (
          <div className={s.plus}>
            {arrow ? <SVGArrowRight /> : <SVGPlus className={s.plus__svg} />}
          </div>
        )}
      </div>
    </>
  );
};