/*
 This file is part of GNU Taler
 (C) 2021-2024 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */

import { TalerMerchantApi } from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, VNode, h } from "preact";
import { WithId } from "../../../../declaration.js";
import { OrderListSection } from "./index.js";
import { CardTable } from "./Table.js";
import { Tooltip } from "../../../../components/Tooltip.js";

const TALER_SCREEN_ID = 47;

export interface ListPageProps {
  onChangeSection: (s: OrderListSection) => void;
  section: OrderListSection;

  orders: (TalerMerchantApi.OrderHistoryEntry & WithId)[];
  onLoadMoreBefore?: () => void;
  onLoadMoreAfter?: () => void;

  onSelectOrder: (o: TalerMerchantApi.OrderHistoryEntry & WithId) => void;
  onRefundOrder: (o: TalerMerchantApi.OrderHistoryEntry & WithId) => void;
  onCreate: () => void;
}

export function ListPage({
  onLoadMoreAfter,
  onLoadMoreBefore,
  orders,
  onSelectOrder,
  onRefundOrder,
  onChangeSection,
  section,
  onCreate,
}: ListPageProps): VNode {
  const { i18n } = useTranslationContext();

  return (
    <Fragment>
      <div class="columns">
        <div class="column">
          <div
            class="tabs"
            style={{ paddingTop: 10, paddingBottom: 10, overflow: "inherit" }}
          >
            <ul>
              <li
                class={
                  section === OrderListSection.NEW ? "is-active" : undefined
                }
              >
                <Tooltip text={i18n.str`Only show unpaid orders`}>
                  <a onClick={() => onChangeSection(OrderListSection.NEW)}>
                    <i18n.Translate>New</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
              <li
                class={
                  section === OrderListSection.PAID ? "is-active" : undefined
                }
              >
                <Tooltip text={i18n.str`Only show paid orders`}>
                  <a onClick={() => onChangeSection(OrderListSection.PAID)}>
                    <i18n.Translate>Paid</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
              <li
                class={
                  section === OrderListSection.REFUNDED
                    ? "is-active"
                    : undefined
                }
              >
                <Tooltip text={i18n.str`Only show orders with refunds`}>
                  <a onClick={() => onChangeSection(OrderListSection.REFUNDED)}>
                    <i18n.Translate>Refunded</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
              <li
                class={
                  section === OrderListSection.PENDING ? "is-active" : undefined
                }
              >
                <Tooltip
                  text={i18n.str`Show only paid orders for which the wire transfer is still pending.`}
                >
                  <a onClick={() => onChangeSection(OrderListSection.PENDING)}>
                    <i18n.Translate>Not wired</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
              <li
                class={
                  section === OrderListSection.INCOMING
                    ? "is-active"
                    : undefined
                }
              >
                <Tooltip
                  text={i18n.str`Only display orders that have already been transferred by the payment service provider`}
                >
                  <a onClick={() => onChangeSection(OrderListSection.INCOMING)}>
                    <i18n.Translate>Completed</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
              <li class={section === undefined ? "is-active" : undefined}>
                <Tooltip text={i18n.str`Remove all filters`}>
                  <a onClick={() => onChangeSection(OrderListSection.ALL)}>
                    <i18n.Translate>All</i18n.Translate>
                    <i class="icon mdi mdi-information ml-2" />
                  </a>
                </Tooltip>
              </li>
            </ul>
          </div>
        </div>
        <div class="column "></div>
      </div>

      <CardTable
        orders={orders}
        onCreate={onCreate}
        section={section}
        onSelect={onSelectOrder}
        onRefund={onRefundOrder}
        onLoadMoreAfter={onLoadMoreAfter}
        onLoadMoreBefore={onLoadMoreBefore}
      />
    </Fragment>
  );
}
