import { useMemo, useState } from "react";
import { View } from "@tarojs/components";

import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";
import WemetaInput from "@/components/wemeta-input/index";
import WemetaTextarea from "@/components/wemeta-textarea";
import FormItem from '@/components/Form/FormItem'

import  PickerSingleColumn from "@/components/Picker/PickerSingleColumn";
import IconArrowDownRounded from '@/components/icon/IconArrowDownRounded';

import { saveMyContact } from '@/service/user'
import BottomBar from "@/components/BottomBar";
import { isSuccess } from "@/utils";
import Taro from "@tarojs/taro";
import ButtonMain from "@/components/buttons/ButtonMain";

export default function Index() {

  
  // 当前选中的值
  const options = ['销售人员', '客服与售后支持', '市场与商务合作人员', '新员工 / 培训岗位', '管理者 / 内容运营者']
  // 是否显示选择器
  const [showPicker, setShowPicker] = useState(false)

  // 当前选中的值
  const [selected, setSelected] = useState(options[0])

  const handleChange = (value: string) => {
    setSelected(value)
  }

  const [value, setValue] = useState({
    entName: "",
    mobileOrWechat: "",
    name: "",
    position: selected,
    reqDetail: ""
  });

  const onChange = (key: string, v: string) => {
    value[key] = v;
    setValue({
      ...value,
    });
  };

  const handleSubmit = async () => {
    const result = await saveMyContact(value);
    if(isSuccess(result.status)){
      Taro.showToast({
        title: '提交成功'
      })
      setTimeout(()=> {
        Taro.navigateBack()
      }, 2000)
    }
  };

  const isDisable = useMemo(()=> !value.name || !value.mobileOrWechat || !value.entName || !selected, [value, selected])
  

  return (
    <PageCustom>
      <NavBarNormal
        scrollFadeIn
        backText="联系我们"
      ></NavBarNormal>
      <View className="flex flex-col items-center w-full gap-16 p-16 pb-140">
        <FormItem labelText="您的姓名" required>
          <WemetaInput
              value={value.name}
              onInput={(value: string) => onChange("name", value)}
              placeholder="请输入"
            />
        </FormItem>
        <FormItem labelText="联系方式" required>
          <WemetaInput
              value={value.mobileOrWechat}
              onInput={(value: string) => onChange("mobileOrWechat", value)}
              placeholder="请输入您的手机号/微信号"
            />
        </FormItem>
        <FormItem labelText="公司信息" required>
          <WemetaInput
              value={value.entName}
              onInput={(value: string) => onChange("entName", value)}
              placeholder="请输入公司名称"
            />
        </FormItem>
        <FormItem labelText="您的岗位" required>
          <PickerSingleColumn headerTitle="您的岗位" options={options} selected={selected} onChange={handleChange} showPicker={showPicker} setShowPicker={setShowPicker}>
            <View className="flex items-center gap-2 bg-white rounded-12 p-12 mb-16" onClick={() => setShowPicker(true)}>
              <View className="flex-1 text-14 leading-22 text-gray-45">{selected}</View>
              <View className="flex-center">
                <IconArrowDownRounded/>
              </View>
            </View>
          </PickerSingleColumn>
        </FormItem>
        <FormItem labelText="需求详情">
          <WemetaTextarea
            value={value.reqDetail}
            onInput={(value: string) => onChange("reqDetail", value)}
            placeholder="请输入"
          />
        </FormItem>

      </View>
      <BottomBar>
        <ButtonMain className="flex-1" disabled={isDisable} onClick={handleSubmit}>提 交</ButtonMain>
        
      </BottomBar>
    </PageCustom>
  );
}