"use client"

import { CometChatCreateGroup, CometChatGroupEvents, CreateGroupStyle } from "@cometchat//chat-uikit-react"
import React from "react"
import { createComponent } from "@lit-labs/react"
import { Drawer } from "antd"
import { DrawerCss } from "./style"
import classNames from "classnames"

interface IProps {
  openDrawer: boolean
  loading?: boolean
  setOpenDrawer: (isOpen: boolean) => void
  formRef?: any
  inforContact?: any
}

const CreateGroup = (props: IProps) => {
  const CreateGroup = createComponent({
    tagName: "cometchat-create-group",
    elementClass: CometChatCreateGroup,
    react: React,
  })

  const createGroupStyle = new CreateGroupStyle({
    height: "100%",
    width: "100%",
  })

  CometChatGroupEvents.ccGroupCreated.subscribe(
    (group: CometChat.Group) => {
      console.log("evnet", group);
      if (group?.getGuid()) {
        props?.setOpenDrawer(false)
      }
    }
  );

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      title={<p>{"New Group"}</p>}
      placement="right"
      open={props?.openDrawer}
      loading={props?.loading}
      onClose={() => props.setOpenDrawer(false)}
      width={444}>
      <CreateGroup
        createGroupStyle={createGroupStyle}
        hideCloseButton
        title=""
      />
    </Drawer>
  )
}

export default CreateGroup