import * as React from 'react';
import { Box, Button, Pill, Text } from '@nova-hf/ui';
import classNames from 'classnames/bind';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import Profile from 'store/models/Profile';
import { useHasCancellationQuery } from 'typings/graphql';
import { formatDate, formatFirstName, formatPrice, formatTel } from 'utils/helpers';
import { getLinks } from 'utils/links';

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

const cn = classNames.bind(s);

interface IProfileBoxItemProps {
  children?: React.ReactNode;
  color: string;
  profile: Profile;
  onSelect?: () => void;
  editMenu?: object;
  subtitlePrefix?: string;
  onClick?: () => void;
  status: string;
  buttonText?: string;
  inGrid: boolean;
  className?: string;
  loading?: boolean;
  summaryLoading?: boolean;
  terminated?: Date | null;
}

export const ProfileBoxItem = ({
  children,
  color,
  profile,
  editMenu,
  className,
  onClick,
  status,
  buttonText,
  inGrid,
  onSelect,
  loading,
  summaryLoading,
  terminated,
}: IProfileBoxItemProps) => {
  const { name, rateplan, title, subscriptionId, isActive, signup, summary } = profile;
  const isDisabled = !isActive && !buttonText;
  const { more } = getLinks();
  const { data } = useHasCancellationQuery({
    variables: {
      input: {
        subscriptionId: subscriptionId,
      },
    },
  });
  const hasCancellation = data?.hasCancellation;
  const rateplanText = profile.isBundle
    ? `${formatTel(title).toUpperCase()} - ${rateplan.title.toUpperCase()}`
    : `${rateplan.title.toUpperCase()} - ${formatTel(title)}`;

  return (
    <div className={`${cn(s.profileBoxItem, { isDisabled, inGrid })} ${className}`}>
      <div className={s.profileBoxItem__container}>
        <div className={s.profileBoxItem__shadow}>
          <div className={s.profileBoxItem__wrapper}>
            <div className={s.profileBoxItem__top}>
              {onClick && (
                <div className={s.profileBoxItem__head}>
                  <button
                    className={cn(s.profileBoxItem__headtext, `color-${color}`)}
                    onClick={onClick}
                  >
                    <div className={s.profileBoxItem__title}>{formatFirstName(name)}</div>
                    {hasCancellation && (
                      <Box marginBottom={1}>
                        <Pill color="warning" text="Virk uppsögn" />
                      </Box>
                    )}
                    <div className={s.profileBoxItem__info}>
                      <div className={s.profileBoxItem__topWrapper}>
                        <span className={cn(s.profileBoxItem__rateplan, { withSummary: summary })}>
                          {profile.isRouted ? rateplanText + ' - OCS' : rateplanText}
                        </span>
                        {summary && <span>{formatPrice(summary.totalSum)}</span>}
                        {summaryLoading && <span>...</span>}
                      </div>
                      {(!isActive || signup) && status && (
                        <div className={s.profileBoxItem__status}>{status}</div>
                      )}
                    </div>
                    {terminated && (
                      <Text color="pink" variant="pSmallBold">{`Varð óvirkt ${formatDate(
                        terminated,
                        'dd.MM.yyyy',
                      )}`}</Text>
                    )}
                  </button>

                  {editMenu && <div className={s.profileBoxItem__editMenu}>{editMenu}</div>}
                </div>
              )}

              {children}
            </div>

            {buttonText && (
              <div className={s.profileBoxItem__button}>
                <Button
                  background="white"
                  text="dark"
                  big
                  fill
                  noShadow
                  loading={loading}
                  linkComponent={
                    rateplan.isPrepaid ? (
                      <LinkWrapper href={`${more.fylltann.custom}/${subscriptionId}`} newTab />
                    ) : undefined
                  }
                  onClick={!rateplan.isPrepaid ? onSelect : undefined}
                  className="tourAddServicepack"
                >
                  {buttonText}
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};