import { Text, View } from "@tarojs/components";
import { PriceEditor } from "@/components";
import { OrderCalculator } from "@/utils";

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

  return (
    <View className={"flex flex-col gap-2.5"}>
      {/* 卡片形式展示计提税金信息 */}
      <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
        <View className="mb-2">
          <Text className="text-sm font-medium">计提税金</Text>
        </View>

        <View className="flex">
          <PriceEditor
            value={
              orderDealer.taxProvision === null ||
              orderDealer.taxProvision === undefined
                ? calculator.getTaxProvision()
                : orderDealer.taxProvision
            }
            onSave={(newValue) => {
              // 更新父组件的状态
              onChange?.({
                ...orderVO,
                orderDealer: {
                  ...orderDealer,
                  taxProvision: newValue,
                },
              });
            }}
            readOnly={readOnly}
            label="计提金额"
            unit="元"
            hint="点击金额可直接编辑"
          />

          <View className="flex flex-1 flex-col gap-2 pl-4">
            <View className="flex items-center justify-between">
              <Text className="text-sm text-gray-500">计提税率</Text>
              <Text className="text-sm font-medium">
                {orderDealer.accrualTaxRatio
                  ? orderDealer.accrualTaxRatio + "%"
                  : "未设置"}
              </Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
