"use client";
import { Loading } from "@/components/dashboard/loading";
// import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
// import {
//   Form,
//   FormControl,
//   FormDescription,
//   FormField,
//   FormItem,
//   FormLabel,
//   FormMessage,
// } from "@/components/ui/form";
// import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toaster";
// import { trpc } from "@/lib/trpc/client";
// import { zodResolver } from "@hookform/resolvers/zod";
import { Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
// import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button, Form, Select, type FormItemProps, Input } from 'antd';
import { createContext, useContext, useMemo } from "react";
import service from "@/lib/http/service";

const formSchema = z.object({
  name: z.string().min(2).max(50),
});

// export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
// const form = useForm<z.infer<typeof formSchema>>({
//   resolver: zodResolver(formSchema),
// });

// const create = trpc.api.create.useMutation({
//   onSuccess(res) {
//     toast.success("Your API has been created");
//     router.refresh();
//     router.push(`/app/apis/${res.id}`);
//   },
//   onError(err) {
//     console.error(err);
//     toast.error(err.message);
//   },
// });
export interface AttributeListItem {
  id: number;
  type: number;
  name: string;
  inputList: string;
  selectType: number;
  inputType: number;
}

export interface CreateFormProps {
  onCancel: () => void;
  onSubmit: (values: AttributeListItem) => void;
  createModalVisible: boolean;
}

const FormItem = Form.Item;

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

export const CreateApiButton: React.FC<CreateFormProps> = (props) => {
  const [form] = Form.useForm();

  const [inputType, setInputType] = useState<number>(1);

  const { onSubmit, onCancel, createModalVisible } = props;

  useEffect(() => {
    if (form && !createModalVisible) {
      form.resetFields();
    } else {
      // queryCategoryAttribute({ pageSize: 100, current: 1 }).then((res) => {
      //   setCategoryListItems(res.data)
      // });
    }

  }, [props.createModalVisible]);

  // async function onSubmit(values: z.infer<typeof formSchema>) {
  //   // create.mutate(values);
  // }

  const router = useRouter();


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

  const onFinish = async (value: object) => {
    console.log("onFinish ---", value);

    await service.post('/api/v1/customer/create/staff', {

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


    }, {
      headers: {
        // 'Authorization': token
      }
    }).then(function (result: any) {


      console.log("result:", result)

      if (result && result.header.code != 0) {

        toast.error(result.header.message)
        return
      }

      // setInitLoading(false);

      // categoriesRef.current.values


      const tags = result.data.list

      // getNewListFunc(1)


    }).catch((err) => {
      // setInitLoading(false);

    });
  };

  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          {/* <Button className="flex-row items-center gap-1 font-semibold " icon={<Plus size={18} className="w-5 h-5 " />} type="default">
       
            创建新员工
          </Button> */}

          <Button type="primary" htmlType="submit" className="bg-[#000] w-full rounded">
            创建新员工
          </Button>
        </DialogTrigger>

        <DialogContent className="w-11/12 bg-white max-sm: ">
          <DialogTitle>创建新员工</DialogTitle>

          {/* <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)}>
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="my-api"
                        {...field}
                        className=" dark:focus:border-gray-700"
                      />
                    </FormControl>
                    <FormDescription>
                      This is just a human readable name for you and not visible to anyone else
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <DialogFooter className="flex-row justify-end gap-2 pt-4 ">
                <Button
                  disabled={create.isLoading || !form.formState.isValid}
                  className="mt-4 "
                  type="submit"
                >
                  {create.isLoading ? <Loading /> : "Create"}
                </Button>
              </DialogFooter>
            </form>
          </Form> */}



          <div>

            <Form
              form={form}
              name="form_item_path"
              layout="vertical"
              onFinish={onFinish}>

              <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="设置组织名称">
    <Input placeholder="设置名称" />
  </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
                name="select"
                label="Select"
                hasFeedback
                rules={[{ required: true, message: 'Please select your country!' }]}
              >
                <Select defaultValue="china" placeholder="Please select a country">
                  <Select.Option value="china">China</Select.Option>
                  <Select.Option value="usa">U.S.A</Select.Option>
                </Select>
              </Form.Item>

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

                {/* communication tones（交流语气）：友好且真诚friendly and sincere, 专业且稳重professional and cautious, 清晰且直接clear and direct */}

                <Select id="tone" defaultValue="friendly and sincere" 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
                name="gender"
                label="性别"
              >
                <Select id="gender" placeholder={'请选择性别'}>
                  <Select.Option value={0}>停用</Select.Option>
                  <Select.Option value={1}>启用</Select.Option>
                </Select>
              </Form.Item> */}

              <Form.Item
                label="回答长度"
                name="output_length"
              // rules={[{ required: true }]}
              >


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


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


              <Form.Item
                label="上传LOGO"
                name="avatar_url"
              // rules={[{ required: true }]}
              >
                {/* <Select defaultValue="one" >
                  <Select.Option value="one">默认</Select.Option>
                </Select> */}
                <Input
                  // variant="borderless"
                  // className="placeholder:text-[#808080] "
                  // style={{
                  //   background: "#F5F5F5",
                  //   borderRadius: "0",
                  //   // width: 360

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

              </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> */}

              <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>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};