"use client"

export const CometChatMessageAction = {
  outgoing: "Outgoing Call",
  incoming: "Incoming Call",
  missed: "Missed Call",
  cancelled: "Call Cancelled",
  ended: "Call Ended",
}

export const iconType = {
  audio: `url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EIcons%2F24%2FCall%402x%3C%2Ftitle%3E%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Icons%2F24%2FCall%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22streamline-icon-phone-actions-voice-mail%4024x24%22%20transform%3D%22translate%283.000000%2C%203.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.0679824131%2C6.18726899%20L1.15322891%2C7.27252708%20C1.71745406%2C7.8368527%202.48276427%2C8.15389548%203.28076591%2C8.15389548%20C4.07876755%2C8.15389548%204.84407776%2C7.8368527%205.40830291%2C7.27252708%20L7.00415829%2C5.67746515%20C7.28631808%2C5.39534955%207.44483777%2C5.01269036%207.44483777%2C4.61368527%20C7.44483777%2C4.21468018%207.28631808%2C3.83202099%207.00415829%2C3.5499054%20L3.90079098%2C0.446504908%20C3.59388219%2C0.136593264%203.16773676%2C-0.025114152%202.73249452%2C0.00317689658%20C2.29725227%2C0.0314679452%201.89562592%2C0.246981102%201.63141818%2C0.594015717%20C-1.61783738%2C5.00961401%200.349222543%2C9.660257%204.34493966%2C13.6552063%20C8.34065677%2C17.6501557%2012.9904395%2C19.6180471%2017.4059906%2C16.3687568%20C17.7530215%2C16.1045463%2017.9685324%2C15.7029156%2017.9968231%2C15.2676687%20C18.0251139%2C14.8324218%2017.8634082%2C14.4062718%2017.5534999%2C14.0993598%20L14.450943%2C10.9959593%20C14.1688305%2C10.7137965%2013.7861754%2C10.5552751%2013.3871745%2C10.5552751%20C12.9881737%2C10.5552751%2012.6055186%2C10.7137965%2012.323406%2C10.9959593%20L10.7275507%2C12.5918317%20C10.1632311%2C13.1560629%209.8461917%2C13.9213813%209.8461917%2C14.7193915%20C9.8461917%2C15.5174016%2010.1632311%2C16.28272%2010.7275507%2C16.8469512%20L11.8249545%2C17.9443668%22%20id%3D%22Path%22%3E%3C%2Fpath%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E") center center / 100% no-repeat`,
  video: `url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EIcons%2F24%2FVideo%402x%3C%2Ftitle%3E%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Icons%2F24%2FVideo%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%282.000000%2C%206.500000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.79471961%2C-7.25088203e-17%20L11.9552804%2C7.25088203e-17%20C12.5793435%2C-4.21297127e-17%2012.8056439%2C0.0649779267%2013.033792%2C0.186992889%20C13.2619401%2C0.309007852%2013.4409921%2C0.488059851%2013.5630071%2C0.716207995%20C13.6850221%2C0.94435614%2013.75%2C1.1706565%2013.75%2C1.79471961%20L13.75%2C9.20528039%20C13.75%2C9.8293435%2013.6850221%2C10.0556439%2013.5630071%2C10.283792%20C13.4409921%2C10.5119401%2013.2619401%2C10.6909921%2013.033792%2C10.8130071%20C12.8056439%2C10.9350221%2012.5793435%2C11%2011.9552804%2C11%20L1.79471961%2C11%20C1.1706565%2C11%200.94435614%2C10.9350221%200.716207995%2C10.8130071%20C0.488059851%2C10.6909921%200.309007852%2C10.5119401%200.186992889%2C10.283792%20C0.0649779267%2C10.0556439%209.39485689e-17%2C9.8293435%20-1.61693481e-16%2C9.20528039%20L4.83392135e-17%2C1.79471961%20C-2.80864751e-17%2C1.1706565%200.0649779267%2C0.94435614%200.186992889%2C0.716207995%20C0.309007852%2C0.488059851%200.488059851%2C0.309007852%200.716207995%2C0.186992889%20C0.94435614%2C0.0649779267%201.1706565%2C4.21297127e-17%201.79471961%2C-7.25088203e-17%20Z%22%20id%3D%22Rectangle%22%3E%3C%2Fpath%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M17.2599167%2C8.63041667%20L19.6304167%2C9.81475%20C19.8435282%2C9.92114296%2020.096526%2C9.90964554%2020.299109%2C9.78436146%20C20.5016921%2C9.65907738%2020.625%2C9.43785985%2020.625%2C9.19966667%20L20.625%2C1.80033333%20C20.625%2C1.56214015%2020.5016921%2C1.34092262%2020.299109%2C1.21563854%20C20.096526%2C1.09035446%2019.8435282%2C1.07885704%2019.6304167%2C1.18525%20L17.2599167%2C2.36958333%20C16.7940465%2C2.60259636%2016.4998441%2C3.07885646%2016.4999999%2C3.59975%20L16.4999999%2C7.40025%20C16.4998441%2C7.92114354%2016.7940465%2C8.39740364%2017.2599167%2C8.63041667%20Z%22%20id%3D%22Path%22%3E%3C%2Fpath%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E')  center center / 100% no-repeat`,
}

export interface ITypeCallProps {
  type?: "audio" | "video" | string
  text: string
  color?: string
  icon?: string
  bg_icon?: string
  className?: string
}

export interface INewTypeCallProps extends Pick<ITypeCallProps, "type"> {
  action?: keyof typeof CometChatMessageAction
}

const TypeCall = (props: ITypeCallProps) => {
  return (
    <div className={`flex items-center gap-1 rounded-[10px] border border-solid p-1.5 ${props?.className || ""}`}>
      {props?.icon && (
        <div
          style={{
            WebkitMask: props?.icon,
            height: "24px",
            width: "24px",
          }}
          className={props?.bg_icon ? props?.bg_icon : "bg-black"}
          title="Call Icon"></div>
      )}
      <div className={props?.color ? props?.color : "text-[var(--secondary-60)]"}>{props?.text}</div>
    </div>
  )
}

export const CustomTypeCall = ({ type, action }: INewTypeCallProps) => {
  switch (type) {
    case "video":
    case "audio":
      switch (action) {
        case "outgoing":
        case "incoming":
        case "ended":
        case "cancelled":
          return (
            <TypeCall
              type={type}
              icon={iconType[type]}
              text={CometChatMessageAction[action]}
            />
          )
        case "missed":
          return (
            <TypeCall
              type={type}
              icon={iconType[type]}
              text={CometChatMessageAction[action]}
              color="text-[var(--danger-70)]"
              bg_icon="bg-[var(--danger-70)]"
              className="border-[var(--danger-70)]"
            />
          )
        default:
          return <TypeCall text="Invalid" />
      }
    default:
      return <TypeCall text="Invalid" />
  }
}