import { View } from "@tarojs/components";
import { Icon, PurchaseStep1Form } from "@/components";
import { convertOrderToOrderShip } from "@/utils";

export default function PurchaseFormSection(props: {
  orderVO: BusinessAPI.OrderVO;
  onChange?: (orderDealer: BusinessAPI.OrderVO) => void;
  readOnly?: boolean;
}) {
  const { orderVO, onChange } = props;

  const orderShip =
    orderVO.orderShipList && orderVO.orderShipList.length > 0
      ? orderVO.orderShipList[0]
      : convertOrderToOrderShip(orderVO);

  if (!orderShip) {
    return;
  }

  return (
    <View className={"flex flex-col gap-2.5"}>
      <View className="flex overflow-x-auto border-b border-gray-200 px-2">
        <View className="flex-none">
          <View className="text-primary flex items-center gap-1 px-4 py-3 text-sm font-medium">
            <Icon name="plus" size={14} />
            <View>添加分单</View>
          </View>
        </View>
        <View className="flex-none">
          <View className="tab-active flex items-center px-4 py-3 text-sm font-medium">
            <View>黄花仓</View>
          </View>
        </View>
        <View className="flex-none">
          <View className="flex items-center px-4 py-3 text-sm font-medium">
            <View>晋州仓</View>
          </View>
        </View>
        <View className="flex-none">
          <View className="flex items-center px-4 py-3 text-sm font-medium">
            <View>石家庄仓</View>
          </View>
        </View>
        <View className="flex-none">
          <View className="flex items-center px-4 py-3 text-sm font-medium">
            <View>保定仓</View>
          </View>
        </View>
        <View className="flex-none">
          <View className="flex items-center px-4 py-3 text-sm font-medium">
            <View>唐山仓</View>
          </View>
        </View>
      </View>
      <PurchaseStep1Form
        orderShipVO={orderShip}
        setOrderShipVO={(orderShipVO) => {
          onChange?.({
            ...orderVO,
            orderShipList: [orderShipVO],
          });
        }}
      />
    </View>
  );
}
