import React from "react";
import SmsTemplateModal, {
  ISmsTemplateModalInfo,
} from "./components/SmsTemplateModal";
import { IManager, ITemplate } from "../../types/interface";
import { isEmpty, JDradioButton, JDalign } from "@janda-com/front";
import { lang as LANG } from "../../lang/langFn";
import { JDbutton, useModal, JDpreloader } from "@janda-com/front";
import SmsCard from "./components/SmsCard";
import { ISmsConfig } from "../../app";
import { TController } from "./SmsTemplateSettingWrap";
import TriggerSettingWrap, {
  IChainProp as ITriggerChainProp,
} from "./components/TriggerSettingWrap";
import { useRadioButton } from "@janda-com/front";
import { ITriggerModalInfo } from "./components/TriggerModal";

export interface IChainProp extends ITriggerChainProp {}

interface IProps extends IChainProp {
  manager: IManager;
  config: ISmsConfig;
  controller: TController;
  totalLoading: boolean;
}

const SmsTemplateSetting: React.FC<IProps> = ({
  manager,
  config,
  controller,
  totalLoading,
  tagsOp,
}) => {
  const triggerModalHook = useModal<ITriggerModalInfo>();

  const radioButtonHook = useRadioButton(
    ["template"],
    [
      {
        label: LANG("template"),
        value: "template",
      },
      {
        label: LANG("trigger"),
        value: "trigger",
      },
    ]
  );
  const { selectedValues } = radioButtonHook;
  const isTemplateMode = selectedValues.includes("template");
  const { templates } = manager;
  const smsTemplateModal = useModal<ISmsTemplateModalInfo>(false);

  const templatesOp = templates.map((t) => ({
    label: t.name,
    value: t._id,
  }));

  const handleCreateBtnClick = () => {
    smsTemplateModal.openModal({
      isAdd: true,
    });
  };

  const handleSmsViewCardClick = (template: ITemplate) => {
    smsTemplateModal.openModal({
      isAdd: false,
      template,
    });
  };

  return (
    <div id="sms" className="sms">
      <JDpreloader loading={totalLoading} />
      <JDalign flex>
        {isTemplateMode && (
          <JDbutton
            thema="primary"
            label={LANG("template_create")}
            onClick={handleCreateBtnClick}
          />
        )}
        {isTemplateMode || (
          <JDbutton
            onClick={() => {
              triggerModalHook.openModal({
                mode: "create",
              });
            }}
            thema={"primary"}
            label={LANG("trigger_create")}
          />
        )}
        <JDradioButton only {...radioButtonHook} mode="gather" />
      </JDalign>

      <div className="docs-section__box">
        {!isTemplateMode && (
          <div>
            <TriggerSettingWrap
              autoSendCases={config.autoSendCases}
              templatesOp={templatesOp}
              modalHook={triggerModalHook}
              tagsOp={tagsOp}
              manager={manager}
              config={config}
            />
          </div>
        )}
        {isTemplateMode && (
          <div className="row sms__templateCardWrap clear-fix">
            {templates.map((template) => (
              <div
                key={template._id}
                className="col col--float col--full-3 col--lg-4 col--md-6 "
              >
                <SmsCard
                  config={config}
                  onClick={() => {
                    handleSmsViewCardClick(template);
                  }}
                  template={template}
                />
              </div>
            ))}
          </div>
        )}
        {isEmpty(templates) && (
          <h4 className="JDtextColor--placeHolder">
            {LANG("create_a_new_template")}
          </h4>
        )}
      </div>
      <SmsTemplateModal
        sticky
        fullInMobile
        totalLoading={totalLoading}
        config={config}
        controller={controller}
        key={smsTemplateModal.info?.template?._id}
        modalHook={smsTemplateModal}
      />
    </div>
  );
};

export default SmsTemplateSetting;
