"use client";

import React, { useEffect, useState } from 'react';
import {
  Button,
  Form, GetProp, Input, InputNumber, Modal, Select, Upload, UploadFile, UploadProps, message
} from 'antd';
import { Loading } from "@/components/dashboard/loading";
import service, { UserDataStorageName } from '@/lib/http/service';
import toast from 'react-hot-toast';
import { StaffsInfo, StaffsInfoWithoutId, editStaff } from '@/lib/http/staff';
import { useRouter } from 'next/navigation';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { useLocalStorage } from '@/lib/hooks/use-local-storage';
import { UserData } from '@/components/user-menu';

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
// import { Button } from "@/components/ui/button";


const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

const getBase64 = (file: FileType): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: StaffsInfoWithoutId) => {
  const hide = message.loading('正在更新');
  try {
    // fields.password = md5(fields.password)
    // fields.user_alias = fields.user_name
    console.log("----------:", fields)

    let result = await editStaff({ ...fields });

    console.log("---handleAdd-result------:", result)
    hide();
    message.success('更新成功');
    return true;
  } catch (error) {
    hide();
    message.error('更新失败请重试！');
    return false;
  }
};

export interface UpdateFormProps {
  // onSubmit: (values: Partial<MemberTableListItem>) => void;
  updateModalVisible?: boolean;
  currentData: Partial<StaffsInfoWithoutId>;
}

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = Form.useForm();

  const [initLoading, setInitLoading] = useState(false);

  const {
    updateModalVisible,
    currentData,
  } = props;

  useEffect(() => {
    if (form && !updateModalVisible) {
      form.resetFields();

    }
  }, [props.updateModalVisible]);

  useEffect(() => {
    if (currentData) {
      form.setFieldsValue({
        ...currentData,
      });
    }
  }, [props.currentData]);


  const handleSubmit = () => {
    if (!form) return;
    form.submit();
  };

  // const handleFinish = (values: JobListItem) => {
  //   if (onSubmit) {
  //     onSubmit(values);
  //   }
  // };

  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [urlImage, setURLImage] = useState('');
  const [uploading, setUploading] = useState(false);
  const [fileList, setFileList] = useState<UploadFile[]>([
    {
      uid: '-1',
      name: 'logo.png',
      status: 'done',
      url: currentData.avatar_url,
    },
    // {
    //   uid: '-xxx',
    //   percent: 50,
    //   name: 'image.png',
    //   status: 'uploading',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // },
    // {
    //   uid: '-5',
    //   name: 'image.png',
    //   status: 'error',
    // },
  ]);


  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as FileType);
    }

    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);


  };

  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    setFileList(newFileList);

    console.log("=---handleChange----", newFileList)

    // const formData = new FormData();
    // fileList.forEach((file) => {
    //   formData.append('files[]', file as FileType);
    // });
    // setUploading(true);
    // // You can use any AJAX library you like
    // fetch(process.env.NEXT_PUBLIC_FILE_BASE + "/api/v1/customer/upload/file", {
    //   method: 'POST',
    //   body: formData,
    // })
    //   .then((res) => res.json())
    //   .then(() => {
    //     setFileList([]);
    //     message.success('upload successfully.');
    //   })
    //   .catch(() => {
    //     message.error('upload failed.');
    //   })
    //   .finally(() => {
    //     setUploading(false);
    //   });
  }


  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );

  const [userData, setUserData] = useLocalStorage(
    UserDataStorageName,
    {
      auth_token: "",
      id: 1,
      login_ip: "",
      login_time: 0,
      role: "",
      user_name: "",
      first_name: "",
      version: ""
    } as UserData
  )

  const renderContent = () => {
    return (
      <>
        <Card>
          <CardHeader>
            <CardTitle>员工信息</CardTitle>
            <CardDescription>
              员工客服 基础信息。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col space-y-2">
              {/* <Form.Item label="版本">
                <Select defaultValue="demo" disabled>
                  <Select.Option value="demo">通用版本</Select.Option>
                  <Select.Option value="demo2">高级版本</Select.Option>
                </Select>
              </Form.Item> */}
              <Form.Item label="ID" name="id" hidden>
                <Input
                  placeholder="设置ID"
                  disabled
                />
              </Form.Item>

              <Form.Item
                label="设置组织名称"
                name="org_name"
                rules={[{ required: true }]}
              >
                <Input
                  // variant="borderless"
                  // className="placeholder:text-[#808080] "
                  // style={{
                  //   background: "#F5F5F5",
                  //   borderRadius: "0",
                  //   // width: 360

                  // }}
                  placeholder="设置名称"
                />
              </Form.Item>

              <Form.Item
                label="员工名称(必填)"
                name="name"
                rules={[{ required: true }]}
              >
                <Input
                  // variant="borderless"
                  // className="placeholder:text-[#808080] "
                  // style={{
                  //   background: "#F5F5F5",
                  //   borderRadius: "0",
                  //   // width: 360

                  // }}
                  placeholder="设置名称"
                />
              </Form.Item>

              <Form.Item
                label="语言模式"
                name="language_mode"
              // rules={[{ required: true }]}
              >
                <Select id="language_mode" placeholder={'请选择语言模式'}>
                  <Select.Option value="spoken language">口语</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="回复语言类型"
                name="language_response"
              // rules={[{ required: true }]}
              >
                <Select id="language_response" placeholder={'请选择回复语言类型'}>
                  <Select.Option value="chinese">中文</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="客服语气"
                name="tone"
              // rules={[{ required: true }]}
              >

                {/* communication tones（交流语气）：友好且真诚friendly and sincere, 专业且稳重professional and cautious, 清晰且直接clear and direct */}
                {/* defaultValue="friendly and sincere" */}
                <Select id="tone" placeholder={'请选择语气'}>
                  <Select.Option value="friendly and sincere">友好且真诚</Select.Option>
                  <Select.Option value="professional and cautious">专业且稳重</Select.Option>
                  <Select.Option value="clear and direct">清晰且直接</Select.Option>
                </Select>
              </Form.Item>



              <Form.Item
                label="回答长度"
                name="output_length"
              // rules={[{ required: true }]}
              >
                <Select id="output_length" placeholder={'请选择回答长度'}>
                  <Select.Option value="short">默认(简短)</Select.Option>
                  <Select.Option value="medium">中等</Select.Option>
                  <Select.Option value="longer">较长</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="上传LOGO"
                name="avatar_url"
              // valuePropName="fileList"
              // getValueFromEvent={(e) => {
              //   if (Array.isArray(e)) {
              //     return e;
              //   }
              //   return e && e.fileList;
              // }}
              // rules={[{ required: true }]}
              >
                {/* <Input
            // variant="borderless"
            // className="placeholder:text-[#808080] "
            // style={{
            //   background: "#F5F5F5",
            //   borderRadius: "0",
            //   // width: 360

            // }}
            placeholder="设置Logo"
          /> */}

                <Upload
                  action={process.env.NEXT_PUBLIC_FILE_BASE + "/api/v1/customer/upload/file"}
                  // action="//jsonplaceholder.typicode.com/posts/"
                  accept='*'
                  listType="picture"
                  // headers={{"Authorization": 'Bearer ' + localStorage.getItem(UserDataStorageName)}}
                  // headers={{ "Authorization": localStorage.getItem(UserDataStorageName) }}
                  maxCount={1}
                  headers={{
                    "Authorization": userData.auth_token,
                  }}
                  data={(file) => {
                    // const formData = new FormData()
                    // formData.append('files[]', file as FileType)
                    return {
                      file_data: file,
                      file_name: file.name,
                    }

                  }}
                  defaultFileList={[...fileList]}
                  // name='file_data'
                  onPreview={handlePreview}
                  // onChange={handleChange}
                  onChange={(info) => {

                    console.log("-------info----", info)
                    if (info.file.status !== 'uploading') {
                      console.log(info.file, info.fileList);
                    }
                    if (info.file.status === 'done') {
                      message.success(`${info.file.name} file uploaded successfully`);

                      if (info.file.response.header.code === 0) {
                        setURLImage(info.file.response.data.file_url)

                        // if (info.fileList) {
                        //   setFileList([info.fileList[info.fileList.length - 1]]);
                        // }

                        setFileList(info.fileList)

                      } else {
                        message.error(`${info.file.response.header.message}.`);
                      }

                    } else if (info.file.status === 'error') {
                      message.error(`${info.file.name} file upload failed.`);
                    }




                    // setFileList([
                    //   ...fileList,
                    //   ...info.fileList,
                    //   {
                    //     uid: info.file.originFileObj?.uid || "",
                    //     name: info.file.name,
                    //     status: 'done',
                    //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                    //   }
                    // ]);
                  }}
                  // previewFile={(file) => {
                  //   console.log('Your upload file:', file);
                  //   // Your process logic. Here we just mock to the same file

                  //   const formData = new FormData();
                  //   // fileList.forEach((file) => {
                  //   //   formData.append('files[]', file as FileType);
                  //   // });

                  //   formData.append('files[]', file as FileType);

                  //   return fetch(process.env.NEXT_PUBLIC_FILE_BASE + "/api/v1/customer/upload/file", {
                  //     method: 'POST',
                  //     body: formData,
                  //   })
                  //     .then((res) => res.json())
                  //     .then(({ thumbnail }) => thumbnail);
                  // }}
                  beforeUpload={(file) => {
                    // setFileList([...fileList, file]);

                    return true;
                  }}

                >
                  <Button icon={<UploadOutlined />}>Upload</Button>
                </Upload>
                <br />

              </Form.Item >

              <Form.Item label="问候语"
                name="greetings"
              >
                <Input.TextArea
                  maxLength={512}
                  className=""
                />
              </Form.Item>

              <Form.Item label="员工描述"
                name="description"
              // wrapperCol={{
              //   offset: 2,
              //   span: 16
              // }}
              // validateStatus="error"
              // hasFeedback
              // help="Should have something"
              >
                <Input.TextArea
                  // allowClear
                  // showCount 
                  // style={{
                  //   background: "#fff",
                  //   borderRadius: "0",
                  //   border: "none",
                  //   height: "100px",
                  // }}
                  className=""
                />
              </Form.Item>



              {/* <Button type="primary" htmlType="submit" className="bg-[#000] w-full rounded">
                创建AI客服


              </Button> */}

              {/* <Form.Item wrapperCol={{ span: 12, offset: 12 }}>
                <Button
                  // disabled={initLoading || !form.formState.isValid}

                  disabled={
                    initLoading
                    // ||
                    // !form.isFieldsTouched(true) ||
                    // !!form.getFieldsError().filter(({ errors }) => errors.length).length
                  }
                  className="mt-4 bg-[#000] text-[#fff]"
                  htmlType="submit"
                >
                  {initLoading ? <Loading /> : "创建AI客服"}
                </Button>
              </Form.Item> */}

            </div>
          </CardContent>
          <CardFooter className="justify-end">
            <Button
              // disabled={initLoading || !form.formState.isValid}

              disabled={
                initLoading
                // ||
                // !form.isFieldsTouched(true) ||
                // !!form.getFieldsError().filter(({ errors }) => errors.length).length
              }
              className="mt-4 bg-[#000] text-[#fff]"
              htmlType="submit"
            >
              {initLoading ? <Loading /> : "更新"}
            </Button>
          </CardFooter>
        </Card>




      </>
    );
  };


  const router = useRouter();

  return (
    // <Modal
    //   forceRender
    //   destroyOnClose
    //   title="新建职位信息"
    //   open={createModalVisible}
    //   {...modalFooter}
    // >
    //   <Form
    //     {...formLayout}
    //     form={form}
    //     onFinish={handleFinish}
    //   >
    //     {renderContent()}
    //   </Form>
    // </Modal>

    <div className='mb-[1rem]'>

      <Form
        {...formLayout}
        form={form}

        initialValues={{
          // tone: 'friendly and sincere',
          // output_length: 'short',
          // language_mode: 'spoken language',
          // language_response: 'chinese',
          avatar_url: currentData.avatar_url
        }}
        onFinish={async (e: StaffsInfoWithoutId) => {

          // "name":"我的AI员工1号",     //员工名称(必填)
          // "org_name":"主板销售部",    //组织名称(必填)
          // "tone":"亲切且专业",        //语气
          // "language_mode":"口语",    //语言模式
          // "language_response":"中文", //回复语言类型
          // "output_length":"简短",    //回复长度
          // "description":"销冠的潜质", //员工描述
          // "avatar_url":"https://www.pic.com/avatar001.jpg" //头像URL

          e.avatar_url = urlImage ? urlImage : e.avatar_url
          console.log("-----onFinish--------", e)
          if (await handleUpdate(e)) {
            // router.push("/manage/staffs")
          }

        }}
      >
        {renderContent()}
      </Form>
    </div>
  );
};

export default UpdateForm;


