import React, { FormEvent, useState } from 'react';
import { useQuery } from '@apollo/client';
import {
  ArrowLink,
  Button,
  CheckboxDeprecated,
  CheckboxGroupDeprecated,
  Col,
  ContainerDeprecated,
  GridDeprecated,
  TextBox,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { Error } from 'components/error/Error';
import Table from 'components/table/Table';
import TableBody from 'components/table/TableBody';
import TableCell from 'components/table/TableCell';
import TableHead from 'components/table/TableHead';
import TableRow from 'components/table/TableRow';
import OrderSummary from 'containers/order-summary/OrderSummary';
import gql from 'graphql-tag';
import { isEmpty, omit } from 'lodash';
import { GetPaymentsQuery, PaymentsInput, PaymentType, QueryPaymentsArgs } from 'typings/graphql';
import { formatDate, formatPrice, formElementsToObject, scrollToElement } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';
import { withStaff } from 'utils/with-staff';

const COLOR = 'ocean';

type Form = {
  amount: string;
  authorizationCode: string;
  customerSsn: string;
};

const query = gql`
  query GetPayments($input: PaymentsInput) {
    payments(input: $input) {
      payments {
        orderId
        id
        transactionTimeStamp
        customerSsn
        authorizationCode
        paymentType
        cardName
        amount
        message
        paymentInfo {
          maskedCardNumber
          msisdn
        }
      }
    }
  }
`;

const Uppflettingar = withStaff(() => {
  const [input, setInput] = useState<PaymentsInput>({});
  const [order, setOrder] = useState<string>('');
  const [paymentType, setPaymentType] = useState<PaymentType>();
  const { t } = useTranslation('staff');

  const { data, loading } = useQuery<GetPaymentsQuery, QueryPaymentsArgs>(query, {
    skip: isEmpty(input),
    variables: {
      input,
    },
  });

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const formInput = formElementsToObject(
      e.currentTarget.elements as HTMLCollectionOf<HTMLInputElement>,
    ) as Form;

    setInput({
      paymentType,
      amount: formInput.amount ? parseInt(formInput.amount, 10) : null,
      ...omit(formInput, ['amount']),
    });
  };

  const selectOrder = (orderId: string) => {
    setOrder(orderId);
    scrollToElement('#form');
  };

  return (
    <Wrapper header="dark">
      <SEO title="Staff" />
      <ContainerDeprecated standalone>
        <h1>{t('uppflettingar.title')}</h1>
        <p>
          {t('staff:uppflettingar.description')}
          <a href="https://una/crmInfo/infoTab.aspx" rel="noreferrer" target="_blank">
            <strong>HÉR!</strong>{' '}
          </a>
        </p>
        <p>{t('staff:uppflettingar.texti')}</p>
        <p>{t('staff:uppflettingar.lastFour')}</p>
        <p>{t('staff:uppflettingar.date')}</p>
        <p>{t('staff:uppflettingar.amount')}</p>
        <p>{t('staff:uppflettingar.authorisastionCode')}</p>
        <p>
          <strong>{t('staff:uppflettingar.text')}</strong>
        </p>
        <form onSubmit={onSubmit} id="form">
          <GridDeprecated marginTop={1}>
            <Col col={4}>
              <TextBox label={t('uppflettingar.fields.authCode')} data-key="authorizationCode" />
            </Col>
            <Col col={4}>
              <TextBox label={t('uppflettingar.fields.amount')} data-key="amount" />
            </Col>
            <Col col={9}>
              <CheckboxGroupDeprecated
                name="paymentType"
                radio
                color={COLOR}
                spacing
                data-key="paymentType"
              >
                <CheckboxDeprecated
                  value=""
                  type="radio"
                  onChange={() => setPaymentType(undefined)}
                  defaultChecked
                >
                  {t('uppflettingar.paymentTypes.all')}
                </CheckboxDeprecated>
                <CheckboxDeprecated
                  value="CreditCard"
                  type="radio"
                  onChange={() => setPaymentType(PaymentType.CreditCard as PaymentType)}
                >
                  {t('uppflettingar.paymentTypes.card')}
                </CheckboxDeprecated>
                <CheckboxDeprecated
                  value="Aur"
                  type="radio"
                  onChange={() => setPaymentType(PaymentType.Aur as PaymentType)}
                >
                  {t('uppflettingar.paymentTypes.aur')}
                </CheckboxDeprecated>
                <CheckboxDeprecated
                  value="Netgiro"
                  type="radio"
                  onChange={() => setPaymentType(PaymentType.Netgiro as PaymentType)}
                >
                  {t('uppflettingar.paymentTypes.netgiro')}
                </CheckboxDeprecated>
                <CheckboxDeprecated
                  value="BorgunPortal"
                  type="radio"
                  onChange={() => setPaymentType(PaymentType.BorgunPortal as PaymentType)}
                >
                  {t('uppflettingar.paymentTypes.borgun')}
                </CheckboxDeprecated>
              </CheckboxGroupDeprecated>
            </Col>
            <Col col={3}>
              <Button arrowRight type="submit" fill background={COLOR} big loading={loading}>
                {t('uppflettingar.button')}
              </Button>
            </Col>
          </GridDeprecated>
        </form>
        {order && (
          <GridDeprecated marginTop={1}>
            <Col push={1} col={10}>
              <h3>{t('uppflettingar.orderTitle')}</h3>
            </Col>
            <Col col={10} push={1}>
              <OrderSummary orderId={order} />
            </Col>
            <Col col={2} push={10}>
              <ArrowLink onClick={() => setOrder('')} color={COLOR}>
                {t('uppflettingar.closeButton')}
              </ArrowLink>
            </Col>
          </GridDeprecated>
        )}
        <Table>
          <TableHead>
            <TableCell>{t('uppflettingar.fields.date')}</TableCell>
            <TableCell>{t('uppflettingar.fields.ssn')}</TableCell>
            <TableCell>{t('uppflettingar.fields.paymentType')}</TableCell>
            <TableCell>{t('uppflettingar.fields.authCode')}</TableCell>
            <TableCell>{t('uppflettingar.fields.card')}</TableCell>
            <TableCell>{t('uppflettingar.fields.amount')}</TableCell>
          </TableHead>
          <TableBody>
            {data?.payments?.payments.map(
              ({
                transactionTimeStamp,
                id,
                amount: total,
                customerSsn: ssn,
                cardName,
                paymentInfo,
                orderId,
                authorizationCode: code,
              }) => (
                <TableRow key={id}>
                  <TableCell>
                    {formatDate(transactionTimeStamp as Date, 'dd.MM.yyyy HH:mm')}
                  </TableCell>
                  <TableCell>{ssn}</TableCell>
                  <TableCell>{cardName}</TableCell>
                  <TableCell>{code}</TableCell>
                  <TableCell>
                    {paymentInfo?.msisdn}
                    {paymentInfo?.maskedCardNumber}
                  </TableCell>
                  <TableCell>{total && formatPrice(total)}</TableCell>

                  <TableCell>
                    {orderId && (
                      <ArrowLink type="button" onClick={() => selectOrder(orderId)} color={COLOR}>
                        Nánar
                      </ArrowLink>
                    )}
                  </TableCell>
                </TableRow>
              ),
            )}
          </TableBody>
        </Table>
        {data?.payments?.payments?.length === 0 && (
          <Error
            color={COLOR}
            title={t('uppflettingar.emptyTitle')}
            description={t('uppflettingar.emptyDescription')}
          />
        )}
      </ContainerDeprecated>
    </Wrapper>
  );
});

Uppflettingar.getInitialProps = () => {
  return {
    namespacesRequired: ['staff'],
  };
};

export default Uppflettingar;