import * as React from 'react';
import { Button } from '@nova-hf/ui';
import { formatPrice } from 'utils/helpers';

import SVGArrow from 'assets/svg/arrow.svg';

import s from './ProfileDetail.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IProfileDetailProps {
  color: string;
  categoryTitle: string;
  title: string;
  dataInEurope: string;
  description?: string;
  price: number;
  showPrice?: boolean;
  canModify: boolean;
  onChange: any;
  buttonText: string;
  extraInfoTitle: string;
  extraInfo: any;
  usageInfoTitle: string;
  usageInfo: any;
  paymentInfo: any;
  canCancel: boolean;
  cancelButtonText: string;
  onCancel: any;
  changeDate: any;
}

export const ProfileDetail = ({
  color,
  categoryTitle,
  title,
  dataInEurope,
  description,
  price,
  showPrice = true,
  canModify,
  onChange,
  buttonText,
  extraInfoTitle,
  extraInfo,
  usageInfoTitle,
  usageInfo,
  canCancel,
  paymentInfo,
  cancelButtonText,
  onCancel,
  changeDate,
}: IProfileDetailProps) => {
  let clickableLines = false;

  return (
    <div className={s.profileDetail}>
      {categoryTitle && <div className={s.profileDetail__categoryTitle}>{categoryTitle}</div>}

      <div className={s.profileDetail__pack}>
        <div className={s.profileDetail__packInfo}>
          {title && <div className={cn(s.profileDetail__title, `color-${color}`)}>{title}</div>}
          {dataInEurope && <div className={s.profileDetail__dataInEurope}>{dataInEurope}</div>}
          <div className={s.profileDetail__price}>
            {showPrice ? formatPrice(price, { showZero: true }) : null}
          </div>
        </div>

        {canModify && (
          <div className={s.profileDetail__modify}>
            <Button background={color} big fill onClick={onChange} noShadow>
              {buttonText}
            </Button>
          </div>
        )}
      </div>

      {description && (
        <div
          className={s.profileDetail__description}
          dangerouslySetInnerHTML={{ __html: description }}
        />
      )}

      {extraInfoTitle && extraInfo.length !== 0 && (
        <>
          <div className={s.profileDetail__extraInfoTitle}>{extraInfoTitle}</div>
          {extraInfo.map(({ label, value }: any, i: any) => {
            const clickable = label === 'Fylla á næst' && changeDate;
            if (!clickableLines) {
              clickableLines = clickable;
            }
            return (
              <div
                className={cn(s.profileDetail__extraInfo, { clickable })}
                key={`${i}${label}`}
                onClick={changeDate && clickable ? changeDate.button : undefined}
              >
                <div className={cn(s.profileDetail__wrapper, { clickableLines })}>
                  <div>{label}</div>
                  <div className={s.profileDetail__value}>{value}</div>
                </div>
                {changeDate && clickable && (
                  <div className={s.profileDetail__edit}>
                    <SVGArrow className={s.profileDetail__editSVG} />
                  </div>
                )}
              </div>
            );
          })}
        </>
      )}

      {usageInfo && usageInfo.length !== 0 && (
        <div className={s.profileDetail__usageInfoTitle}>{usageInfoTitle}</div>
      )}

      {usageInfo.map(({ label, value }: any, i: any) => (
        <div className={s.profileDetail__usageInfo} key={`${i}${label}`}>
          <div className={cn(s.profileDetail__wrapper, { clickableLines })}>
            <div>{label}</div>
            <div className={s.profileDetail__value}>{value}</div>
          </div>
        </div>
      ))}

      {paymentInfo && (
        <>
          <div className={s.profileDetail__usageInfoTitle}>{paymentInfo.title}</div>
          <div
            className={cn(s.profileDetail__usageInfo, { clickable: paymentInfo.button })}
            onClick={paymentInfo.button}
          >
            <div className={cn(s.profileDetail__wrapper, { clickableLines })}>
              <div>{paymentInfo.label}</div>
              <div className={s.profileDetail__value}>{paymentInfo.value}</div>
            </div>
            {paymentInfo.button && (
              <div className={s.profileDetail__edit}>
                <SVGArrow className={s.profileDetail__editSVG} />
              </div>
            )}
          </div>
        </>
      )}

      <div className={s.profileDetail__cancel}>
        {canCancel && (
          <Button background="white" text="dark" big fill onClick={onCancel}>
            {cancelButtonText}
          </Button>
        )}
      </div>
    </div>
  );
};