import { Popup, SafeArea } from "@nutui/nutui-react-taro";
import { Image, ScrollView, View } from "@tarojs/components";
import React, { useEffect, useState } from "react";
import { business } from "@/services";

interface ICompanyPickerProps {
  trigger?: React.ReactNode;
  onFinish: (companyVO: BusinessAPI.CompanyVO) => void;
}

export default function CompanyPicker(props: ICompanyPickerProps) {
  const { onFinish, trigger } = props;

  const [companyVO, setCompanyVO] = useState<BusinessAPI.CompanyVO>();
  const [visible, setVisible] = useState(false);
  const [companyVOList, setCompanyVOList] = useState<BusinessAPI.CompanyVO[]>();

  useEffect(() => {
    if (visible) {
      handleSearch().then();
    }
  }, [visible]);

  const handleSearch = async () => {
    const { data } = await business.company.listCompany({
      companyListQry: {
        status: true,
      },
    });

    let companyVOList = data?.data;
    setCompanyVOList(companyVOList as any);
  };

  return (
    <>
      <View
        className={"flex flex-1 flex-row items-center justify-between"}
        style={{
          color: "var(--nutui-color-title, #1a1a1a)",
        }}
        onClick={(event) => {
          setVisible(true);
          event.stopPropagation();
        }}
      >
        {trigger}
      </View>

      {/* 选择销售方 */}
      <Popup
        duration={150}
        style={{
          minHeight: "auto",
        }}
        closeable
        destroyOnClose
        visible={visible}
        title="选择销售方"
        position="bottom"
        onClose={async () => {
          if (visible) {
            setCompanyVO(undefined);
            setVisible(false);
          } else if (companyVO) {
            onFinish(companyVO);
          }
        }}
      >
        <ScrollView scrollY className="h-96">
          <View className={"grid grid-cols-4 px-2.5"}>
            {companyVOList?.length === 0 && (
              <View className={"flex flex-col items-center gap-2 p-5"}>
                <View className={"text-sm"}>未找到匹配的销售方</View>
              </View>
            )}
            {companyVOList?.map((companyVO) => (
              <View
                className={"flex flex-col items-center justify-center p-4"}
                key={companyVO.companyId}
                onClick={async () => {
                  setCompanyVO(companyVO);
                  setVisible(false);
                }}
              >
                <View
                  className={
                    "flex h-16 w-16 items-center justify-center rounded-full border-2 border-gray-200 bg-white shadow-sm"
                  }
                >
                  {companyVO?.logo ? (
                    <Image
                      src={companyVO.logo}
                      className={"h-14 w-14 rounded-full"}
                      mode="aspectFit"
                    />
                  ) : (
                    <View
                      className={
                        "flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-xl font-medium text-blue-500"
                      }
                    >
                      {(companyVO?.shortName || companyVO?.fullName)?.substring(
                        0,
                        2,
                      )}
                    </View>
                  )}
                </View>
                <View className={"mt-2 text-center text-base font-medium"}>
                  {companyVO?.shortName}
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
        <SafeArea position={"bottom"} />
      </Popup>
    </>
  );
}
