/*
 This file is part of GNU Taler
 (C) 2022 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/>
 */

import { ExchangeTosStatus } from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, h, VNode } from "preact";
import { CheckboxOutlined } from "../../components/CheckboxOutlined.js";
import { ExchangeXmlTos } from "../../components/ExchangeToS.js";
import {
  Input,
  LinkSuccess,
  TermsOfServiceStyle,
  WarningBox
} from "../../components/styled/index.js";
import { Button } from "../../mui/Button.js";
import { State } from "./index.js";
import { SelectList } from "../SelectList.js";
import { EnabledBySettings } from "../EnabledBySettings.js";

export function ShowButtonsAcceptedTosView({
  termsAccepted,
  showingTermsOfService,
  children,
}: State.ShowButtonsAccepted): VNode {
  const { i18n } = useTranslationContext();

  return (
    <Fragment>
      {showingTermsOfService.button.onClick !== undefined && (
        <Fragment>
          <section style={{ justifyContent: "space-around", display: "flex" }}>
            <LinkSuccess
              upperCased
              onClick={showingTermsOfService.button.onClick}
            >
              <i18n.Translate>Show terms of service</i18n.Translate>
            </LinkSuccess>
          </section>
          {termsAccepted.button.onClick !== undefined && (
            <section style={{ justifyContent: "space-around", display: "flex" }}>
              <CheckboxOutlined
                name="terms"
                enabled={termsAccepted.value}
                label={
                  <i18n.Translate>
                    I accept the exchange terms of service
                  </i18n.Translate>
                }
                onToggle={termsAccepted.button.onClick}
              />
            </section>
          )}
        </Fragment>
      )}
      {children}
    </Fragment>
  );
}

export function ShowButtonsNonAcceptedTosView({
  showingTermsOfService,
  terms,
}: State.ShowButtonsNotAccepted): VNode {
  const { i18n } = useTranslationContext();
  // const ableToReviewTermsOfService =
  //   showingTermsOfService.button.onClick !== undefined;

  // if (!ableToReviewTermsOfService) {
  //   return (
  //     <Fragment>
  //       {terms.status === ExchangeTosStatus.Pending && (
  //         <section style={{ justifyContent: "space-around", display: "flex" }}>
  //           <WarningText>
  //             <i18n.Translate>
  //               Exchange doesn&apos;t have terms of service
  //             </i18n.Translate>
  //           </WarningText>
  //         </section>
  //       )}
  //     </Fragment>
  //   );
  // }

  return (
    <Fragment>
      {/* {terms.status === ExchangeTosStatus.NotFound && (
        <section style={{ justifyContent: "space-around", display: "flex" }}>
          <WarningText>
            <i18n.Translate>
              Exchange doesn&apos;t have terms of service
            </i18n.Translate>
          </WarningText>
        </section>
      )} */}
      <section style={{ justifyContent: "space-around", display: "flex" }}>
        <Button
          variant="contained"
          color="success"
          onClick={showingTermsOfService.button.onClick}
        >
          <i18n.Translate>Review exchange terms of service</i18n.Translate>
        </Button>
      </section>
    </Fragment>
  );
}

export function ShowTosContentView({
  termsAccepted,
  showingTermsOfService,
  terms,
  tosLang,
  tosFormat,
}: State.ShowContent): VNode {
  const { i18n } = useTranslationContext();
  const ableToReviewTermsOfService =
    termsAccepted.button.onClick !== undefined;

  return (
    <section>
      <Input style={{ display: "flex", justifyContent: "end" }}>
        <EnabledBySettings name="selectTosFormat">
          <SelectList
            label={i18n.str`Format`}
            list={tosFormat.list}
            name="format"
            value={tosFormat.value}
            onChange={tosFormat.onChange}
          />
        </EnabledBySettings>
        <SelectList
          label={i18n.str`Language`}
          list={tosLang.list}
          name="lang"
          value={tosLang.value}
          onChange={tosLang.onChange}
        />
      </Input>

      {!terms.content && (
        <section style={{ justifyContent: "space-around", display: "flex" }}>
          <WarningBox>
            <i18n.Translate>
              The exchange replied with a empty terms of service
            </i18n.Translate>
          </WarningBox>
        </section>
      )}
      {terms.content && (
        <section style={{ justifyContent: "space-around", display: "flex" }}>
          {terms.content.type === "xml" &&
            (!terms.content.document ? (
              <WarningBox>
                <i18n.Translate>
                  No terms of service. The exchange replied with a empty
                  document
                </i18n.Translate>
              </WarningBox>
            ) : (
              <TermsOfServiceStyle>
                <ExchangeXmlTos doc={terms.content.document} />
              </TermsOfServiceStyle>
            ))}
          {terms.content.type === "plain" &&
            (!terms.content.content ? (
              <WarningBox>
                <i18n.Translate>
                  No terms of service. The exchange replied with a empty text
                </i18n.Translate>
              </WarningBox>
            ) : (
              <div style={{ textAlign: "left" }}>
                <pre>{terms.content.content}</pre>
              </div>
            ))}
          {terms.content.type === "html" && (
            <iframe style={{ width: "100%" }} srcDoc={terms.content.html} />
          )}
          {terms.content.type === "pdf" && (
            <a href={terms.content.location.toString()} download="tos.pdf">
              <i18n.Translate>Download Terms of Service</i18n.Translate>
            </a>
          )}
        </section>
      )}
      {showingTermsOfService && ableToReviewTermsOfService && (
        <section style={{ justifyContent: "space-around", display: "flex" }}>
          <LinkSuccess
            upperCased
            onClick={showingTermsOfService.button.onClick}
          >
            <i18n.Translate>Hide terms of service</i18n.Translate>
          </LinkSuccess>
        </section>
      )}
      {termsAccepted.button.onClick && terms.status !== ExchangeTosStatus.Accepted && (
        <section style={{ justifyContent: "space-around", display: "flex" }}>
          <CheckboxOutlined
            name="terms"
            enabled={termsAccepted.value}
            label={
              <i18n.Translate>
                I accept the exchange terms of service
              </i18n.Translate>
            }
            onToggle={termsAccepted.button.onClick}
          />
        </section>
      )}
    </section>
  );
}