import { ScrollView, View } from "@tarojs/components";
import { Image } from "@nutui/nutui-react-taro";
import { Icon } from "@/components";
import classNames from "classnames";
import React from "react";

interface IStallListProps {
  value: BusinessAPI.OrderVO;
  onChange: (orderVO: BusinessAPI.OrderVO) => void;

  melonStallRefs: React.MutableRefObject<any[]>;
  weighRefs: React.MutableRefObject<any[]>;
  orderPackageRefs: React.MutableRefObject<any[]>;
}

export default function StallList(props: IStallListProps) {
  const { value, onChange, melonStallRefs, weighRefs, orderPackageRefs } =
    props;

  const { orderSupplierList, active } = value;

  if (orderSupplierList.length <= 1) {
    return null;
  }

  const validate = () => {
    // 获取当前选中的供应商
    const selectedIndex = orderSupplierList.findIndex(
      (supplier) => supplier.selected,
    );

    if (active === 2 && !melonStallRefs.current[selectedIndex]?.validate()) {
      return false;
    }
    // 在第三步（称重信息）时进行校验
    else if (active === 3 && !weighRefs.current[selectedIndex]?.validate()) {
      return false;
    } // 在第四步（包装信息）时进行校验
    else if (
      active === 4 &&
      !orderPackageRefs.current[selectedIndex]?.validate()
    ) {
      return false;
    }

    return true;
  };

  const onSelect = (supplierVO: BusinessAPI.OrderSupplier) => {
    if (!validate()) {
      return;
    }
    const newOrderSupplierList = orderSupplierList.map((item) => {
      if (item.supplierId === supplierVO.supplierId) {
        return {
          ...item,
          selected: true,
        };
      }
      return {
        ...item,
        selected: false,
      };
    });
    onChange({
      ...value,
      orderSupplierList: newOrderSupplierList,
    });
  };

  return (
    <View className={"sticky top-12 z-10 bg-[#D1D5DB] p-2.5"}>
      <ScrollView
        className={
          "border-primary rounded-lg rounded-xl border-4 bg-white shadow-sm"
        }
        scrollX
      >
        <View className="flex flex-row">
          {orderSupplierList?.map((supplierVO: BusinessAPI.OrderSupplier) => (
            <View
              key={supplierVO.orderSupplierId}
              className="relative flex flex-col items-center p-2.5"
              onClick={() => onSelect(supplierVO)}
            >
              <View
                className={classNames(
                  "relative mb-2.5 size-12 rounded-full bg-gray-200",
                  {
                    "border-primary border-4": supplierVO.selected,
                  },
                )}
              >
                <Image
                  src={
                    "https://img.qilincloud168.com/resources/melon/melon-farmer.png"
                  }
                  className="h-full w-full rounded-full object-cover"
                />
              </View>
              {supplierVO.name &&
                supplierVO.idCard &&
                supplierVO.phone &&
                supplierVO.bankCard && (
                  <View className="absolute mb-2.5 flex size-12 items-center justify-center rounded-full">
                    <View className="flex size-4 items-center justify-center rounded-full bg-[#FF7A30]">
                      <Icon name={"check"} size={16} color={"#fff"} />
                    </View>
                  </View>
                )}
              {supplierVO.isLast && (
                <View className="bg-primary absolute top-2 -right-6 rounded-full">
                  <View className="bg-primary rounded-full px-1 py-0.5 text-xs text-white">
                    最后一个
                  </View>
                </View>
              )}
              <View className="text-primary w-12 overflow-hidden text-center text-sm text-ellipsis whitespace-nowrap">
                {supplierVO.name}
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}
