import React, { useEffect, useState } from 'react';
import { Box, Button, Col, NotificationBanner } from '@nova-hf/ui';
import Checkbox from 'components/checkbox/Checkbox';
import { Row } from 'components/row/Row';
import StickyBar from 'components/sticky-bar/StickyBar';
import { StickyItem } from 'components/sticky-bar/StickyItem';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import Claim from 'store/models/Claim';
import { IClaim, IInvoice } from 'typings';
import { formatPrice } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import { ClaimList } from '../components/claim-list/ClaimList';
import ClaimListItem from '../components/claim-list/ClaimListItem';
import { InvoiceBoxItem } from '../components/invoice-list/InvoiceBoxItem';
import { InvoiceList } from '../components/invoice-list/InvoiceList';
import { InvoiceListItem } from '../components/invoice-list/InvoiceListItem';

interface IInvoicesProps {
  color: string;
  view: string;
  claimsList: IClaim[];
  invoices: IInvoice[];
  loading: boolean;
  claims?: any;
  ui?: any;
  authentication?: any;
}

interface IClaimsProps {
  color: string;
  claimsList: IClaim[];
  ui?: any;
  claims?: any;
  onClick(): any;
}

const Claims = ({ color, claimsList, claims, ui, onClick }: IClaimsProps) => {
  const { selectedClaims } = claims;
  const { t } = useTranslation('invoices');
  const [mappedClaimsList, setClaimsList] = useState(claimsList.map((claim) => new Claim(claim)));

  const onSelectClaim = (claim: Claim) => {
    if (claim.motusCharge > 0) return;

    claims.addClaim(claim);
    if (mappedClaimsList.length === 1 && claims.findClaim(claim)) {
      onClick();
    }
  };

  const onSelectAll = () => {
    claims.selectedClaims = mappedClaimsList.filter((claim) => !claim.motusCharge);
    onClick();
  };

  const onShowMore = (e: any, claim: Claim) => {
    e.stopPropagation();

    claim.showMoreInvoices = !claim.showMoreInvoices;
    setClaimsList([...mappedClaimsList]);
  };

  return (
    <ClaimList
      color={color}
      onSelect={onSelectAll}
      title={`${t('claims.unpaidClaims')} (${mappedClaimsList.length})`}
      buttonTitle={t('claims.payAllClaims')}
    >
      {mappedClaimsList.map((claim: Claim) => (
        <ClaimListItem
          key={claim.claimNumber}
          claim={claim}
          color={color}
          disabled={claim.motusCharge > 0}
          onSelect={onSelectClaim}
          selected={selectedClaims.some(
            (c: IClaim) => c.claimNumber === claim.claimNumber && c.dueDate === claim.dueDate,
          )}
          showMore={claim.showMoreInvoices}
          onShowMore={(e: any) => onShowMore(e, claim)}
        />
      ))}

      {selectedClaims.length > 0 && ui.isMobile && (
        <Button onClick={onClick} background={color} fill big arrowRight noShadow>
          {selectedClaims.length === 1 ? t('claims.payChosenClaim') : t('claims.payChosenClaims')} (
          {selectedClaims.length})
        </Button>
      )}
    </ClaimList>
  );
};

const Invoices = ({
  color,
  view,
  loading,
  invoices,
  claims,
  claimsList,
  ui,
  authentication,
}: IInvoicesProps) => {
  const {
    accountInput: { ssn },
  } = authentication;
  const { selectedClaims, totalCharge } = claims;
  const { t } = useTranslation('invoices');
  const router = useRouter();

  useEffect(() => {
    ui.setIsStickyBar(false);
  }, []);

  const onClick = () => {
    router.push(`/${ssn}/reikningar/greida`).then(() => window.scrollTo(0, 0));
  };

  const showStickyBar = selectedClaims.length > 0 && !ui.isMobile;

  if (showStickyBar) {
    ui.setIsStickyBar(true);
  }

  return (
    <>
      <Col col={12}>
        <Row>
          {claimsList && claimsList.length > 0 && (
            <Claims
              claimsList={claimsList}
              claims={claims}
              onClick={onClick}
              color={color}
              ui={ui}
            />
          )}
          <InvoiceList color={color} view={view}>
            {invoices.map((invoice: IInvoice) =>
              view === 'box' ? (
                <InvoiceBoxItem key={invoice.id} invoice={invoice} color={color} />
              ) : (
                <InvoiceListItem key={invoice.id} invoice={invoice} color={color} />
              ),
            )}
          </InvoiceList>
        </Row>
      </Col>

      {showStickyBar && (
        <StickyBar button={t('claims.pay')} color={color} onClick={onClick} loading={loading}>
          <StickyItem color={color}>
            <Checkbox type="radio" large defaultChecked name="transaction">
              {`${selectedClaims.length} ${
                selectedClaims.length === 1 ? t('claims.chosenClaim') : t('claims.chosenClaims')
              }`}
            </Checkbox>
          </StickyItem>
          <StickyItem
            color={color}
            title={t('claims.total')}
            subTitle={formatPrice(totalCharge)}
            alignRightItemWithButton
          />
        </StickyBar>
      )}
    </>
  );
};

export default inject('claims', 'ui', 'authentication')(observer(Invoices));