import * as React from 'react';
import classNames from 'classnames/bind';
import Checkbox from 'components/checkbox/Checkbox';
import Profile from 'store/models/Profile';
import { formatPrice, formatTel } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

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

const cn = classNames.bind(s);

export type HeaderTitles = {
  services: string;
  rateplan: string;
  amount: string;
  abroad: string;
};

interface IProfileListItemProps {
  children?: React.ReactNode;
  color: string;
  profile: Profile;
  onSelect: () => void;
  noSelection?: boolean;
  editMenu?: object;
  subtitlePrefix?: string;
  onClick: () => void;
  headers: HeaderTitles;
  summariesLoading: boolean;
}

export const ProfileListItem = ({
  children,
  color,
  onSelect,
  profile,
  noSelection = false,
  editMenu,
  subtitlePrefix,
  onClick,
  headers,
  summariesLoading,
}: IProfileListItemProps) => {
  const {
    name,
    subscriptionId,
    selected,
    accountName,
    rateplan,
    summary,
    title,
    isActive,
    statusCode,
    isPrepaid,
    isRouted,
  } = profile;
  const colorClass = isActive ? `color-${color}` : '';

  const { t } = useTranslation('subscriptions');
  const status =
    statusCode === 'b1w'
      ? t(`statusCode.${statusCode}.${isPrepaid ? 'prepaid' : 'postpaid'}`)
      : t(`statusCode.${statusCode}`);

  return (
    <div className={cn(s.profileListItem, { isDisabled: !isActive })}>
      {!noSelection && (
        <div className={s.profileListItem__checkbox}>
          <Checkbox
            radio
            color={color}
            name={subscriptionId}
            checked={selected || false}
            onChange={onSelect}
          />
        </div>
      )}
      <a className={cn(s.profileListItem__profile, { noSelection, editMenu })} onClick={onClick}>
        <div className={s.profileListItem__profileWrapper}>
          <div className={s.profileListItem__subscription}>
            <div className={s.profileListItem__subscriptionWrapper}>
              <div className={cn(s.profileListItem__title, colorClass, 'profile')}>{name}</div>
              <div className={cn(s.profileListItem__subtitle, 'profile')}>
                {subtitlePrefix && (
                  <span className={s.profileListItem__subtitlePrefix}>{subtitlePrefix}</span>
                )}
                {` ${accountName}`}
              </div>
            </div>
          </div>
          <div className={s.profileListItem__usagePacks}>
            <div className={s.profileListItem__usagePack}>
              <div className={cn(s.profileListItem__title, colorClass, 'usagePack')}>
                {rateplan.title}
              </div>

              <div className={cn(s.profileListItem__subtitle, 'usagePack')}>
                {isRouted ? formatTel(title) + ' - OCS' : formatTel(title)}
              </div>
            </div>
          </div>
          {children && <div className={s.profileListItem__usageListItems}>{children}</div>}
          <div className={s.profileListItem__total}>
            {isActive && (
              <div className={s.profileListItem__totalWrapper}>
                <div className={cn(s.profileListItem__title, colorClass, 'total')}>
                  {summary
                    ? formatPrice(summary.totalSum)
                    : summariesLoading
                    ? '...'
                    : formatPrice(0)}
                </div>
                <div className={cn(s.profileListItem__subtitle, 'total')}>
                  {summary
                    ? `${headers.abroad} ${formatPrice(summary.totalForeignSum)}`
                    : summariesLoading
                    ? '...'
                    : formatPrice(0)}
                </div>
              </div>
            )}
          </div>
        </div>
        {!isActive && <div className={s.profileListItem__status}>{status}</div>}
      </a>

      {editMenu}
    </div>
  );
};