import React from "react";
import SenderRegistModal, {
  SenderRegistModalProp,
} from "./components/SenderRegistModal";
import { myLang } from "./lang/langFn";
import SmsTemplateSettingWrap, {
  ITemplateSettingWrapProp,
} from "./pages/smsTemplateSetting/SmsTemplateSettingWrap";
import SmsInfo, { ISmsInfoProp } from "./pages/smsInfo/SmsInfo";
import SmsHistoryWrap, {
  ISmsHistoryProp,
} from "./pages/smsHistory/SmsHistoryWrap";
import { IselectedOption } from "@janda-com/front/build/components/select/SelectBox";
import SmsSenderModalWrap from "./components/smsSendModal/SmsSendModalWrap";
import { ISmsSenderProp } from "./components/smsSendModal/declartion";
import { SenderListWrap } from "./components/SenderList/SenderListWrap";
import ChargeModalWrap, {
  IChargeModalWrapProp,
} from "./components/chargeModal/ChargeModalWrap";

// 상수값만 여기 들어갈듯... 변수는 지금 구조상 적용하기 힘듬.
export interface ISmsProp {
  smsReplaceKeys: IselectedOption<string>[];
  autoSendCases: IselectedOption<string>[];
}

export interface ISmsConfig extends ISmsProp {
  msgToTemplate: (msg: string) => string;
  templateToMsg: (template: string) => string;
}

// TODO 이것 완성
// SmsReplaceKeys 이거를 받아야함
// 그리고 AutoSendCase 를 받아야함
class SMSMoudle {
  config: ISmsConfig;
  SendModal: React.FC<ISmsSenderProp> = (props) => (
    <SmsSenderModalWrap {...props} config={this.config} />
  );
  Manage: React.FC<ITemplateSettingWrapProp> = (props) => (
    <SmsTemplateSettingWrap {...props} config={this.config} />
  );
  History: React.FC<ISmsHistoryProp> = (props) => (
    <SmsHistoryWrap {...props} config={this.config} />
  );
  Info: React.FC<ISmsInfoProp> = (props) => (
    <SmsInfo {...props} config={this.config} />
  );
  SenderModal: React.FC<SenderRegistModalProp> = (props) => (
    <SenderRegistModal {...props} config={this.config} />
  );
  SnederList: React.FC = (props) => (
    <SenderListWrap {...props} config={this.config} />
  );
  ChargeModalWrap: React.FC<IChargeModalWrapProp> = (prop) => (
    <ChargeModalWrap config={this.config} {...prop} />
  );

  constructor(props: ISmsProp) {
    const { autoSendCases, smsReplaceKeys } = props;
    this.config = {
      autoSendCases: autoSendCases,
      smsReplaceKeys: smsReplaceKeys,
      // [라벨] => {%%키%%}
      msgToTemplate: (msg) => {
        let temp = msg;
        smsReplaceKeys.forEach((op) => {
          temp = temp.replace(/\)/gi,"RIGHT_BRACKET");
          temp =  temp.replace(/\(/gi,"LEFT_BRACKET");
          let formated = op.label.replace(/\)/gi,"RIGHT_BRACKET");
          formated = formated.replace(/\(/gi,"LEFT_BRACKET");

          const rgax = new RegExp(`\\[${formated}\\]`, "g");
          temp = temp.replace(rgax, `{%%${op.value}%%}`);
        });
        return temp;
      },
      // {%%키%%} => [라벨]
      templateToMsg: (template) => {
        let temp = template;
        smsReplaceKeys.forEach((op) => {
          const rgax = new RegExp(`\{\%\%${op.value}\%\%\}`, "g");
          temp = temp.replace(rgax, `[${op.label}]`);
        });
        return temp;
      },
    };
  }

  public langChange = (lang: any) => {
    myLang.changeLang(lang);
  };
}

export const DummyMoudle = new SMSMoudle({
  autoSendCases: [
    { label: "고객이 카드 예약시 나에게", value: "111" },
    { label: "고객이 카드 예약시 고객에게", value: "1111" },
    { label: "고객이 예약을 취소시 나에게", value: "1111" },
    { label: "고객이 예약을 취소시 고객에게", value: "1111" },
    { label: "고객이 예약을 취소할시 나에게", value: "1112" },
    { label: "고객이 무통장입금 예약시 고객에게", value: "1113" },
    { label: "고객이 무통장입금 예약시 나에게", value: "1114" },
    { label: "내가 예약시 고객에게", value: "!23235" },
    { label: "내가 예약을 취소시 고객에게", value: "!2323" },
  ],
  smsReplaceKeys: [
    {
      label: "이용 시작 시간 (년월일\) 시간",
      value: "aa",
    },
  ],
});

export default SMSMoudle;
