import { FC } from "react";
import { useFormContext } from "react-hook-form";
import DropdownList from "../common/Dropdown";
import { InputField } from "../forms/Inputs";
import { TSproductInSchema } from "../forms/schema/product-in";

const ProductExpenseForm: FC = () => {
  const {
    formState: { errors },
  } = useFormContext<TSproductInSchema>();
  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="left">
          <div>
            <label htmlFor="" className="mt-1 mb-1 block">
              Expense Type
            </label>
            <DropdownList
              name="expense_type"
              placeholder="Expense Type"
              idName="expense.expense_type_id"
              getLabel={(expense_type) => expense_type?.name}
              isMulti={false}
            />
            {errors?.expense?.expense_type_id && (
              <p className="text-red-500">Expense type is required</p>
            )}
          </div>
          <div>
            <label htmlFor="" className="mt-1 mb-2 block">
              Vendor
            </label>
            <DropdownList
              idName="expense.vendor_id"
              name="vendor"
              getLabel={(vendor) => vendor?.name}
              isMulti={false}
            />
          </div>
        </div>
        <div className="mid">
          <div>
            <label htmlFor="" className="mt-1 mb-1 block">
              Payment Method (Fund)
            </label>
            <DropdownList
              name="fund"
              idName="expense.fund_id"
              getLabel={(fund) => fund?.name}
              isMulti={false}
              placeholder="Fund"
            />
          </div>
          <div className="mt-1">
            <InputField
              name="expense.amount"
              labelText="Expense Amount"
              placeholder="Expense Amount"
              readonly={true}
            />
          </div>
        </div>
        <div className="right">
          <div className="mt-0">
            <InputField
              labelText="Expense Note"
              name="expense.note"
              placeholder="Ex:transaction id"
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default ProductExpenseForm;