import {useCommon, IFile, FileType} from "@fanam-pkg/core-utils"
import {assets} from "../../assets"
import {ImageView} from "../../atoms"
import {usePopup, useNotifyPopup} from "../../hooks"
import {FileUpload} from "../../molecules"
import {MediaPreview} from "../../organisms"
import {GroupFormItemProps, FormValueType, FileAttachmentType} from "../../props"
import styles from "./styles.module.sass"

export const GroupAttachment = ({
  name = "",
  isMultiple,
  fileType,
  error,
  value,
  onChangeData,
  wrapperClass = "",
  disabled,
  maxCount,
  isRequired = true,
  label,
}: GroupFormItemProps) => {
  const pickedFile = value as FileAttachmentType
  const {togglePopup} = usePopup()
  const {toggleNotify} = useNotifyPopup()
  const {findFileType} = useCommon()
  const files = (typeof pickedFile === "object" && !Array.isArray(pickedFile)
    ? pickedFile
    : pickedFile || []) as unknown as IFile[]
  const isArray = Array.isArray(files)

  const onChangeMultiple = (data: FormValueType) => {
    const file = data as FileAttachmentType
    if (onChangeData) {
      const pickedFiles = file
        ? ((typeof file === "object" && !Array.isArray(file) ? file[name as keyof IFile] : file) as string[])
        : []
      const filesArr = [...files, ...pickedFiles]
      if (maxCount && filesArr.length > maxCount) {
        toggleNotify({
          title: "Max number of Files!",
          description: `You can select maximum ${maxCount} files`,
          type: "error",
        })
      }
      const imageArr = {[name]: maxCount ? filesArr.slice(0, maxCount) : filesArr}
      onChangeData(imageArr)
    }
  }

  const onPreview = (media: string, mime: FileType) => {
    togglePopup({
      isClosable: true,
      children: (
        <section className={styles.media_container}>
          <MediaPreview url={media} mime={mime} onClickClose={togglePopup} />
        </section>
      ),
    })
  }

  const renderMedia = ({base64 = "", onClickRemove, attachment}: IFile, index: number) => {
    const mime = findFileType(attachment || {url: base64})
    const fileContent = attachment?.url || base64
    const files =
      typeof pickedFile === "object" && !Array.isArray(pickedFile) && !!pickedFile ? pickedFile : pickedFile || []
    const isArray = Array.isArray(files)

    const onRemove = (index: number) => {
      if (onClickRemove) onClickRemove()
      else if (onChangeData) {
        if (isMultiple && isArray) {
          const imageArr = {[name]: files?.filter((_, position: number) => index !== position)}
          onChangeData(imageArr)
        } else onChangeData({[name]: ""})
      }
    }

    return (
      <section className={styles.media_container}>
        {mime === "video" ? (
          <video className={styles.attached_image} onClick={onPreview.bind(null, fileContent, mime)}>
            <source src={fileContent} />
            Your browser does not support the video tag.
          </video>
        ) : mime === "image" ? (
          <ImageView
            src={fileContent}
            onClick={onPreview.bind(null, fileContent, mime)}
            alt="attachment"
            wrapperClass={styles.attached_image}
            objectFit="contain"
          />
        ) : (
          <iframe
            src={fileContent}
            onClick={onPreview.bind(null, fileContent, mime)}
            className={styles.attached_image}
          />
        )}
        <section className={`flex-col-center ${styles.remove_image}`}>
          <section className={`flex ${styles.visible_wrapper}`}>
            <ImageView src={assets.ic_eye} alt="eye-icon" imgSize={20} />
            <h4 className={styles.brand_visible} onClick={onPreview.bind(null, fileContent, mime)}>
              Preview
            </h4>
          </section>
          {!disabled && (
            <section className={`flex ${styles.visible_wrapper}`}>
              <ImageView src={assets.ic_delete} alt="remove-icon" imgSize={20} />
              <h4 className={styles.brand_remove} onClick={onRemove.bind(null, index)}>
                Remove
              </h4>
            </section>
          )}
        </section>
        <ImageView
          wrapperClass={styles.close_page}
          src={assets.ic_close}
          onClick={onRemove.bind(null, index)}
          alt="close-icon"
          imgSize={50}
        />
      </section>
    )
  }

  return (
    <section className={`${wrapperClass} ${styles.group_attachment_container}`}>
      <h4 className={styles.attachment_label}>
        {label} {isRequired && <small className="required_icon">*</small>}
      </h4>
      <section className={styles.attach_field}>
        {isMultiple ? (
          <>
            <FileUpload
              name={name}
              isMultiple={isMultiple}
              fileType={fileType}
              onChangeData={onChangeMultiple}
              wrapperClass={styles.upload_brand}
              error={error}
              disabled={disabled}
            />
            {isArray && !!files?.length && (
              <section className={styles.multiple_attachment}>{files?.map(renderMedia)}</section>
            )}
          </>
        ) : !isArray && files ? (
          renderMedia(files, 0)
        ) : (
          <FileUpload name={name} fileType={fileType} onChangeData={onChangeData} error={error} disabled={disabled} />
        )}
      </section>
    </section>
  )
}