import React from "react";
import { JDcard, JDbadge, JDalign, isEmpty } from "@janda-com/front";
import { ITemplate } from "../../../types/interface";
import { ISmsConfig } from "../../../app";

interface IPP {
  template: ITemplate;
  config: ISmsConfig;
  [key: string]: any;
}

const SmsCard: React.FC<IPP> = ({ template, config, ...prop }) => {
  const { name, content } = template;
  const { autoSendCases, templateToMsg } = config;
  const events = template.triggers.map((t) => t.event);

  const nonEvent = isEmpty(events);
  return (
    <JDcard
      badges={
        nonEvent
          ? undefined
          : [
              {
                hover: true,
                tooltip: (
                  <JDalign>
                    {events.map((ev, i) => (
                      <JDbadge
                        key={ev + i}
                        style={{
                          marginLeft: 0,
                        }}
                        mr="small"
                      >
                        {autoSendCases.find((c) => c.value === ev)?.label}
                      </JDbadge>
                    ))}
                  </JDalign>
                ),
                children: "자동발신",
                thema: "new",
                mode: "folded",
                className: "smsTemplateCard__badge",
              },
            ]
      }
      id={`TemplateCard${template._id}`}
      className="smsTemplateCard sms__templateViewCard"
      hover
      {...prop}
    >
      <h6>
        <span className="JDstandard-small-space">{name} </span>
      </h6>
      <div className="smsTemplateCard__msg">{templateToMsg(content)}</div>
    </JDcard>
  );
};

export default SmsCard;
