import * as React from 'react';
import { formatTel, profileColor } from 'utils/helpers';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import classNames from 'classnames/bind';
import Profile from 'store/models/Profile';

import SVGPhone from 'assets/svg/phone.svg';
import SVGFiber from 'assets/svg/wifihouse.svg';
import SVGInternet from 'assets/svg/FourGnet.svg';
import SVGAlltsaman from 'assets/svg/allt-saman.svg';
import SVGArrow from 'assets/svg/arrow.svg';

import { Icon } from '@nova-hf/ui';

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

const cn = classNames.bind(s);

interface IProfileListItemProps {
  profile: Profile;
  ssn: string;
}

export default class ProfileListItem extends React.Component<IProfileListItemProps> {
  getIcon(type: string) {
    switch (type) {
      case 'tv_content_channel':
        return <Icon icon="tv" color="white" className={s.profileListItem__svg} />;
      case 'mobile':
        return <SVGPhone className={s.profileListItem__svg} />;
      case 'continent':
        return <SVGPhone className={s.profileListItem__svg} />;
      case 'fiber':
        return <SVGFiber className={s.profileListItem__svg} />;
      case 'internet':
        return <SVGInternet className={s.profileListItem__svg} />;
      case 'vip_service_bundle':
        return <SVGPhone className={s.profileListItem__svg} />;
      case 'service_bundle':
        return <SVGAlltsaman className={s.profileListItem__svg} />;
    }
  }

  render() {
    const { profile, ssn } = this.props;
    const { name, rateplan, title, subscriptionId, statusCode, isActive } = profile;

    return (
      <LinkWrapper
        className={s.profileListItem}
        href={`/${ssn}/thjonusta/${subscriptionId}`}
        newTab
      >
        <span
          className={cn(s.profileListItem__icon, `color-${profileColor(rateplan)}`, {
            disabled: !isActive,
          })}
        >
          {this.getIcon(rateplan.typeId)}
        </span>
        <span className={s.profileListItem__labelWrapp}>
          <span className={s.profileListItem__name}>{name}</span>
          <span className={s.profileListItem__rateplan}>
            <span>{rateplan.title.toUpperCase()}</span>

            {!isActive && <span> ({statusCode.toUpperCase()})</span>}

            <span className={s.profileListItem__rateplanDash}> - </span>
            <span className={s.profileListItem__title}> {formatTel(title)}</span>
          </span>
        </span>
        <span className={s.profileListItem__arrow}>
          <SVGArrow className={s.profileListItem__arrowSVG} />
        </span>
      </LinkWrapper>
    );
  }
}