"use client"

import { CloudUploadOutlined } from "@ant-design/icons"
import { Button, Form, Input, Upload } from "antd"
import { useTranslations } from "next-intl"
import Image from "next/image"
import { handleUploadFileIdProof, handleUploadFilePermit } from "@component/Account/Common"
import { LoadingBox } from "@component/Common/LoadingBox"
import classNames from "classnames"
import { FormRegisterCss } from "./style"
import { IUserProfile } from "@/type/User"
import { useEffect } from "react"
import { useUpdateBusinessInfo } from "@/hook/useAuth"
import { useNotificationContext } from "@component/Layout/NotificationContext"

type IProps = {
  user: IUserProfile
  isLoading: boolean
}

export default function Business(props: IProps) {
  const [formRef] = Form.useForm()
  const { notify } = useNotificationContext()

  const { dataUploadFilePermit, uploadFilePermit } = handleUploadFilePermit()
  const { dataUploadFileIdProof, uploadFileIdProof } = handleUploadFileIdProof()

  const updateBusinessInfo = useUpdateBusinessInfo()

  const transMessage = useTranslations("message")
  const trans = useTranslations("account")
  const tranForm = useTranslations("form")
  const transButton = useTranslations("button")
  const transMarket = useTranslations("market")
  const tranRequired = useTranslations("required")
  const transProfile = useTranslations("profile")

  const isNotData =  Boolean(props?.user?.websiteurl && props?.user?.organization && props?.user?.affiliatedpublisher && props?.user?.permit_file && props?.user?.idproof_file)
  
  useEffect(() => {
    if (props?.user) {
      formRef.setFieldsValue({
        website_url: props?.user?.websiteurl,
        organization: props?.user?.organization,
        affiliated_publisher: props?.user?.affiliatedpublisher,
        business_permit: props?.user?.permit_file
          ? [
              {
                uid: "-1",
                name: "image.png",
                status: "done",
                url: props?.user?.permit_file,
                response: {
                  url: props?.user?.permit_file,
                },
              },
            ]
          : undefined,
        proof: props?.user?.idproof_file
          ? [
              {
                uid: "-2",
                name: "image.png",
                status: "done",
                url: props?.user?.idproof_file,
                response: {
                  url: props?.user?.idproof_file,
                },
              },
            ]
          : undefined,
      })
    }
  }, [props?.user])

  const onFinish = (values: any) => {
    const dataRq = {
      ...(dataUploadFilePermit?.data?.data?.name && { permit_file: dataUploadFilePermit?.data?.data?.name }),
      ...(dataUploadFileIdProof?.data?.data?.name && { idproof_file: dataUploadFileIdProof?.data?.data?.name }),
      ...(values?.organization && { organization: values?.organization }),
      ...(values?.affiliated_publisher && { affiliatedpublisher: values?.affiliated_publisher }),
      websiteurl: values?.website_url,
    }
    updateBusinessInfo
      .mutateAsync(dataRq)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("update_successfully"),
        })
      })
      .catch((error) => {
        const concatenatedMsgs = error?.response?.data.msgs ? error?.response?.data.msgs : transMessage("fail")
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: concatenatedMsgs,
        })
      })
  }

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e
    }
    return e?.fileList
  }

  const triggerUpload = () => {
    const fileInput = document.querySelector("input[type='file']") as HTMLInputElement
    fileInput?.click()
  }

  return (
    <div className={classNames(FormRegisterCss)}>
      {props?.isLoading || updateBusinessInfo?.isPending ? (
        <LoadingBox />
      ) : (
        <Form
          name="profile_business"
          form={formRef}
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical">
          <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 mb-3">
            <div className={`${props?.user?.permit_file ? "" : "hidden"}`}>
              <p className="text-base font-semibold mb-2">
                <span className="text-[var(--danger-50)]">*</span> {trans("business_permit")}
              </p>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => prevValues.business_permit !== currentValues.business_permit}>
                {({ getFieldValue }) => {
                  const fileList = getFieldValue("business_permit")
                  return (
                    <>
                      <div
                        className={`items-center gap-2 md:gap-6 lg:gap-2 xl:gap-4 bg-white px-2 xl:px-4 py-4 rounded-lg border-[2px] border-dashed border-[var(--secondary-40)] h-52 ${
                          fileList ? "flex" : "hidden"
                        }`}>
                        <div className="grow h-full">
                          {(dataUploadFilePermit?.data && fileList) || props?.user?.permit_file ? (
                            <Image
                              alt=""
                              src={dataUploadFilePermit?.data?.data?.url ? dataUploadFilePermit?.data?.data?.url : props?.user?.permit_file}
                              width={274}
                              height={216}
                              style={{
                                width: "100%",
                                height: "100%",
                              }}
                              className="max-w-full max-h-full object-cover"
                            />
                          ) : (
                            <LoadingBox />
                          )}
                        </div>
                        <div className="flex flex-col shrink-0 basis-[2rem] w-8 gap-4">
                          <button
                            type="button"
                            onClick={triggerUpload}
                            className="group bg-[var(--secondary-100)] inline-flex justify-center items-center rounded hover:opacity-80 w-8 h-8">
                            <Image
                              src="/img/icon/refresh_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                            />
                          </button>
                          <button
                            type="button"
                            onClick={() => formRef.setFieldsValue({ business_permit: null })}
                            className="group bg-[var(--secondary-20)] inline-flex justify-center items-center rounded hover:bg-[var(--primary--70)] w-8 h-8">
                            <Image
                              src="/img/icon/trash_outline.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="group-hover:hidden"
                            />
                            <Image
                              src="/img/icon/trash_outline_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="hidden group-hover:block"
                            />
                          </button>
                        </div>
                      </div>
                      <Form.Item
                        label=""
                        name="business_permit"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        className={fileList ? "hidden" : ""}
                        rules={[{ required: Boolean(props?.user?.permit_file), message: trans("select_business_permit_please") }]}>
                        <Upload
                          accept="image/png, image/jpg"
                          showUploadList={false}
                          listType="picture-card"
                          maxCount={1}
                          customRequest={uploadFilePermit}
                          className="group">
                          <span className="flex gap-2 text-[var(--primary--90)] bg-[var(--primary--20)] font-semibold px-4 py-2 rounded-lg transition-transform duration-100 ease-in-out group-hover:scale-110">
                            <span>{tranForm("upload_file")}</span>
                            <CloudUploadOutlined />
                          </span>
                        </Upload>
                      </Form.Item>
                    </>
                  )
                }}
              </Form.Item>
            </div>

            <div className={`${props?.user?.idproof_file ? "" : "hidden"}`}>
              <p className="text-base font-semibold mb-2">
                <span className="text-[var(--danger-50)]">*</span> {trans("ID_proof")}
              </p>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => prevValues.proof !== currentValues.proof}>
                {({ getFieldValue }) => {
                  const fileList = getFieldValue("proof")
                  return (
                    <>
                      <div
                        className={`items-center gap-2 md:gap-6 lg:gap-2 xl:gap-4 bg-white px-2 xl:px-4 py-4 rounded-lg border-[2px] border-dashed border-[var(--secondary-40)] h-52 ${
                          fileList ? "flex" : "hidden"
                        }`}>
                        <div className="grow h-full">
                          {(dataUploadFileIdProof?.data && fileList) || props?.user?.idproof_file ? (
                            <Image
                              alt=""
                              src={dataUploadFileIdProof?.data?.data?.url ? dataUploadFileIdProof?.data?.data?.url : props?.user?.idproof_file}
                              width={274}
                              height={216}
                              style={{
                                width: "100%",
                                height: "100%",
                              }}
                              className="max-w-full max-h-full object-cover"
                            />
                          ) : (
                            <LoadingBox />
                          )}
                        </div>
                        <div className="flex flex-col shrink-0 basis-[2rem] w-8 gap-4">
                          <button
                            type="button"
                            onClick={triggerUpload}
                            className="group bg-[var(--secondary-100)] inline-flex justify-center items-center rounded hover:opacity-80 w-8 h-8">
                            <Image
                              src="/img/icon/refresh_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                            />
                          </button>
                          <button
                            type="button"
                            onClick={() => formRef.setFieldsValue({ proof: null })}
                            className="group bg-[var(--secondary-20)] inline-flex justify-center items-center rounded hover:bg-[var(--primary--70)] w-8 h-8">
                            <Image
                              src="/img/icon/trash_outline.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="group-hover:hidden"
                            />
                            <Image
                              src="/img/icon/trash_outline_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="hidden group-hover:block"
                            />
                          </button>
                        </div>
                      </div>
                      <Form.Item
                        label=""
                        name="proof"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        className={fileList ? "hidden" : ""}
                        rules={[{ required: Boolean(props?.user?.idproof_file), message: trans("select_ID_proof_please") }]}>
                        <Upload
                          accept="image/png, image/jpg"
                          showUploadList={false}
                          listType="picture-card"
                          maxCount={1}
                          customRequest={uploadFileIdProof}
                          className="group">
                          <span className="flex gap-2 text-[var(--primary--90)] bg-[var(--primary--20)] font-semibold px-4 py-2 rounded-lg transition-transform duration-100 ease-in-out group-hover:scale-110">
                            <span>{tranForm("upload_file")}</span>
                            <CloudUploadOutlined />
                          </span>
                        </Upload>
                      </Form.Item>
                    </>
                  )
                }}
              </Form.Item>
            </div>
          </div>
          <div className="grid gap-4 grid-cols-12">
            <div className="col-span-12 md:col-span-8">
              <Form.Item
                className={`${props?.user?.websiteurl ? "" : "hidden"}`}
                label={transMarket("website_url")}
                name="website_url"
                rules={[
                  { required: true, message: tranRequired("cannot_empty") },
                  {
                    pattern: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/.*)?$/,
                    message: transMessage("invalid_url"),
                  },
                ]}>
                <Input
                  placeholder="https://abc.com"
                  size="large"
                  onBlur={(e) => {
                    formRef.setFieldsValue({
                      website_url: e.target.value.trim(),
                    })
                  }}
                  className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
                />
              </Form.Item>
              <Form.Item
                className={`${props?.user?.organization ? "" : "hidden"}`}
                label={trans("organization")}
                name="organization"
                rules={[
                  { required: Boolean(props?.user?.organization), message: tranRequired("cannot_empty") },
                  { max: 256, message: trans("name_maxnimum_num_characters", { name: trans("organization"), num: 256 }) },
                ]}>
                <Input
                  placeholder={trans("enter_your_organization")}
                  size="large"
                  onBlur={(e) => {
                    formRef.setFieldsValue({
                      organization: e.target.value.trim(),
                    })
                  }}
                  className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
                />
              </Form.Item>
              <Form.Item
                className={`${props?.user?.affiliatedpublisher ? "" : "hidden"}`}
                label={trans("affiliated_publisher")}
                name="affiliated_publisher"
                rules={[
                  { required: Boolean(props?.user?.affiliatedpublisher), message: tranRequired("cannot_empty") },
                  { max: 256, message: trans("name_maxnimum_num_characters", { name: trans("affiliated_publisher"), num: 256 }) },
                ]}>
                <Input
                  placeholder={trans("enter_affiliated_publisher")}
                  size="large"
                  onBlur={(e) => {
                    formRef.setFieldsValue({
                      affiliated_publisher: e.target.value.trim(),
                    })
                  }}
                  className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
                />
              </Form.Item>
            </div>
            <div className={`col-span-12 ${isNotData ? "md:col-span-4" : "md:col-span-12"}`}>
              <div className={`flex items-center justify-center h-full bg-[var(--secondary-10)] rounded-[10px]`}>
                <div className="flex flex-col items-center justify-center py-4">
                  <Image
                    src={props?.user?.newsassociation ? "wizzor2x.png" : "/img/icon/unavailable.svg"}
                    alt="Unavailable"
                    width={props?.user?.newsassociation ? 128 : 100}
                    height={props?.user?.newsassociation ? 128 : 100}
                    className="max-w-full"
                  />
                  <p
                    className={`text-sm leading-[20px] font-extrabold ${
                      props?.user?.newsassociation
                        ? "rotate-[-17deg] translate-y-[-19px] translate-x-[16px] text-[var(--secondary-100)]"
                        : "text-[var(--secondary-40)]"
                    }`}>
                    {transProfile(props?.user?.newsassociation ? "news_association" : "not_news_association")}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className={`pt-6 flex items-center gap-2 justify-center ${isNotData ? "" : "hidden"}`}>
            <Button
              htmlType="submit"
              type="primary"
              className="md:!text-base font-bold !h-10 !rounded-lg mb-4">
              {transButton("update")}
            </Button>
          </div>
        </Form>
      )}
    </div>
  )
}