<template>
  <div class="row g-3">
    <template v-for="schema in schemas">
      <div :class="`col-md-${schema.cols}`">
        <slot :name="schema.name">
          <template v-if="schema.type?.includes('-select')">
            <component
              :is="schemaTypeToComponent[schema.type ?? 'select']"
              :name="schema.name"
              :label="schema.label"
              :mode="schema.mode"
              :readonly="schema.readonly"
              :keyword="formValue[schema.name] ? formValue[schema.name] : null"
              class="py-0 mb-1"
            />
          </template>
          <template v-else>
            <component
              :is="schemaTypeToComponent[schema.type ?? 'text']"
              :name="schema.name"
              :label="schema.label"
              class="py-0 mb-1"
              :options="schema.options"
              :option-text="schema.optionText"
              :option-value="schema.optionValue"
              :rows="schema.rows"
              :readonly="schema.readonly"
            />
          </template>
        </slot>
      </div>
    </template>
  </div>
</template>
<script setup>
import TextField from "./TextField.vue";
import NumberField from "./NumberField.vue";
import TextArea from "./TextArea.vue";
import DecimalField from "./DecimalField.vue";
import SelectField from "./SelectField.vue";
import Checkbox from "./Checkbox.vue";
import RepresentativeSelect from "./../representative/RepresentativeSelect.vue";
import RetailChannelSelect from "./../retail_channel/RetailChannelSelect.vue";
import ChannelType from "./../channel_type/ChannelTypeSelect.vue";
import DeviceCategorySelect from "./../device_category/DeviceCategorySelect.vue";
import RegionSelect from "./../region/RegionSelect.vue";
import SalesAreaSelect from "./../sales_area/SalesAreaSelect.vue";
import FuelTankTypeSelect from "./../fuel_tank_type/FuelTankTypeSelect.vue";
import ImageInput from "./ImageInput.vue";
import MultipleImageInput from "./MultipleImageInput.vue";
import ProductSelect from "../product/ProductSelect.vue";
import BrandSelect from "../brand/BrandSelect.vue";
import DatePicker from "./DatePicker.vue";
import TimePicker from "./TimePicker.vue";
import RoleSelect from "./../role/RoleSelect.vue";
import ProvinceSelect from "../province/ProvinceSelect.vue";
import CitySelect from "../city/CitySelect.vue";
import DistrictSelect from "../district/DistrictSelect.vue";
import PasswordField from "./PasswordField.vue";
import UserSelect from "../user/UserSelect.vue";
import SurveyorUserSelect from "../surveyor/SurveyorUserSelect.vue";
import SupervisorUserSelect from "../supervisor/SupervisorUserSelect.vue";
import FileInput from "./FileInput.vue";

const props = defineProps({
  schemas: {
    default: [],
  },
  formValue: {
    type: Object,
    default: {},
  },
});

const schemaTypeToComponent = {
  text: TextField,
  password: PasswordField,
  select: SelectField,
  "representative-select": RepresentativeSelect,
  "brand-select": BrandSelect,
  "retail-channel-select": RetailChannelSelect,
  "channel-type-select": ChannelType,
  "device-category-select": DeviceCategorySelect,
  "region-select": RegionSelect,
  "sales-area-select": SalesAreaSelect,
  "product-select": ProductSelect,
  "fuel-tank-type-select": FuelTankTypeSelect,
  "image-input": ImageInput,
  "multiple-image-input": MultipleImageInput,
  date: DatePicker,
  time: TimePicker,
  "role-select": RoleSelect,
  "province-select": ProvinceSelect,
  "city-select": CitySelect,
  "district-select": DistrictSelect,
  textarea: TextArea,
  number: NumberField,
  decimal: DecimalField,
  checkbox: Checkbox,
  "user-select": UserSelect,
  "surveyor-user-select": SurveyorUserSelect,
  "supervisor-user-select": SupervisorUserSelect,
  "file-input": FileInput,
};
</script>
