import React from 'react';

import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import { kintonePrettyFields } from 'kintone-pretty-fields';
import moize from 'moize';
import invariant from 'tiny-invariant';
import { PLUGIN_ID } from '../common/global';
import KintonePluginAlert from '../common/ui/KintonePluginAlert';
import KintonePluginButton from '../common/ui/KintonePluginButton';
import KintonePluginDesc from '../common/ui/KintonePluginDesc';
import KintonePluginLabel from '../common/ui/KintonePluginLabel';
import KintonePluginRequire from '../common/ui/KintonePluginRequire';
import KintonePluginRow from '../common/ui/KintonePluginRow';
import KintonePluginSelect, { KintonePluginSelectOptionData } from '../common/ui/KintonePluginSelect';
import KintonePluginTitle from '../common/ui/KintonePluginTitle';

import styles from './Settings.module.css';

const cachedFields = moize.promise(async (appId: number) => {
  const client = new KintoneRestAPIClient();
  const fields = await kintonePrettyFields.getFields({ client, app: appId, lang: 'en', preview: false });
  return fields;
});

const Settings: React.FC = () => {
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
  const appId = kintone.app.getId();
  invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
  const { fields } = React.use(cachedFields(appId));
  const fileFields = fields.filter(kintonePrettyFields.isFile);
  const options: KintonePluginSelectOptionData[] = [
    { key: '-', value: '', label: 'Select a File field', disabled: true }, // Default option
    ...fileFields.map((field) => ({
      key: field.code,
      value: field.code,
      label: field.label,
    })),
  ];

  const [template, setTemplate] = React.useState<string>(config.template ?? '');

  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    kintone.plugin.app.setConfig({ template }, () => {
      alert('The plug-in settings have been saved. Please update the app!');
      window.location.href = `../../flow?app=${appId}`;
    });
  };

  const handleOnChangeTemplate = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setTemplate(e.target.value);
  };

  const handleOnClickCancel = () => {
    window.location.href = `../../${appId}/plugin/`;
  };

  return (
    <section className="settings">
      <KintonePluginLabel>Settings for the Kintone Word output plugin</KintonePluginLabel>
      <form onSubmit={handleOnSubmit}>
        <KintonePluginRow>
          <KintonePluginTitle>
            Template<KintonePluginRequire>*</KintonePluginRequire>
          </KintonePluginTitle>
          <KintonePluginDesc>Select a file field that contains the WORD template file.</KintonePluginDesc>
          {fileFields.length === 0 ? (
            <KintonePluginAlert>
              No file fields found in the app. Please add a file field to use this plugin.
            </KintonePluginAlert>
          ) : (
            <KintonePluginSelect defaultValue={template} onChange={handleOnChangeTemplate} options={options} />
          )}
        </KintonePluginRow>
        <KintonePluginRow className={styles.buttons}>
          <KintonePluginButton variant="dialog-cancel" type="button" onClick={handleOnClickCancel}>
            Cancel
          </KintonePluginButton>
          <KintonePluginButton variant="dialog-ok" type="submit">
            Save
          </KintonePluginButton>
        </KintonePluginRow>
      </form>
    </section>
  );
};
export default Settings;