/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import { VehicleImageViewer } from "./VehicleImageViewer";
export const vehicleQuotationElements = {
    'submit': ({ props }) => h("form-submit", Object.assign({}, props)),
    'name': ({ props }) => {
        return h("form-input", Object.assign({}, props));
    },
    'phone': ({ props, isLoading }) => h("form-phone-number", Object.assign({ isLoading: isLoading }, props)),
    'vehicle': ({ form, language, props }) => {
        var _a;
        const fetcher = async ({ signal }) => {
            var _a, _b, _c;
            const vehicleEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.vehicleApi;
            const response = await fetch(vehicleEndpoint, { signal, headers: { 'Accept-Language': language } });
            if ((_c = (_b = form.context.structure) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.vehiclesApiStrapiFormat) {
                const res = await response.json();
                let options = res.data;
                return options.map(vehicle => {
                    var _a, _b, _c, _d, _e, _f;
                    return ({
                        label: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.GradeName) || ((_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _a === void 0 ? void 0 : _a.GradeName),
                        value: `${vehicle.id}`,
                        meta: Object.assign(Object.assign({}, vehicle), { image: ((_b = vehicle === null || vehicle === void 0 ? void 0 : vehicle.Cover) === null || _b === void 0 ? void 0 : _b.url) || ((_f = (_e = (_d = (_c = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _c === void 0 ? void 0 : _c.Cover) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.url) }),
                    });
                });
            }
            else {
                const options = await response.json();
                return options.map(vehicle => ({
                    label: vehicle.Title,
                    value: `${vehicle.ID}`,
                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.Image }),
                }));
            }
        };
        let defaultValue;
        if (!props.defaultValue) {
            const params = new URLSearchParams(window.location.search);
            defaultValue = params.get((_a = form.context.structure.data) === null || _a === void 0 ? void 0 : _a.vehicleIdQueryParam);
        }
        else {
            defaultValue = props.defaultValue;
        }
        return h("form-select", Object.assign({}, props, { defaultValue: defaultValue, searchable: true, fetcher: fetcher, language: language }));
    },
    'dealer': ({ form, language, props }) => {
        const fetcher = async ({ signal }) => {
            var _a;
            const dealerEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.dealerApi;
            const response = await fetch(dealerEndpoint, { signal, headers: { 'Accept-Language': language } });
            const options = (await response.json()).map(dealer => ({
                label: dealer.Name,
                value: `${dealer.ID}`,
                meta: Object.assign({}, dealer),
            }));
            return options;
        };
        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
    },
    'paymentType': ({ language, props, locale }) => {
        const fetcher = async ({}) => {
            return [
                {
                    value: 'Cash',
                    label: locale === null || locale === void 0 ? void 0 : locale.Cash,
                },
                {
                    value: 'Installments',
                    label: locale.Installments,
                },
                {
                    value: 'Flexible',
                    label: locale.Flexible,
                },
            ];
        };
        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
    },
    'contactTime': ({ language, props, locale }) => {
        const fetcher = async ({}) => {
            return [
                {
                    value: 'Morning',
                    label: locale === null || locale === void 0 ? void 0 : locale.Morning,
                },
                {
                    value: 'Noon',
                    label: locale === null || locale === void 0 ? void 0 : locale.Noon,
                },
                {
                    value: 'Afternoon',
                    label: locale === null || locale === void 0 ? void 0 : locale.Afternoon,
                },
            ];
        };
        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
    },
    'ownVehicle': ({ language, props, locale }) => {
        const fetcher = async ({}) => {
            return [
                {
                    value: 'yes',
                    label: locale === null || locale === void 0 ? void 0 : locale.Yes,
                },
                {
                    value: 'no',
                    label: locale === null || locale === void 0 ? void 0 : locale.No,
                },
            ];
        };
        return h("form-select", Object.assign({}, props, { fetcher: fetcher, language: language }));
    },
    'currentVehicleBrand': ({ form, language, props, locale }) => {
        form.addWatcher('ownVehicle');
        const ownVehicle = form.getValue('ownVehicle') === 'yes';
        const fetcher = async ({ signal }) => {
            var _a;
            const currentVehiclesEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.currentVehiclesApi;
            const response = await fetch(currentVehiclesEndpoint, { signal, headers: { 'Accept-Language': 'en' } });
            const options = (await response.json()).filter(vehicle => vehicle.name !== 'Other');
            return [
                ...options.map(vehicle => ({
                    label: vehicle.Name,
                    value: `${vehicle.ID}`,
                    meta: Object.assign({}, vehicle),
                })),
                {
                    value: 'Other',
                    label: locale.Other,
                },
            ];
        };
        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
    },
    'currentVehicleModel': ({ form, language, props, locale }) => {
        form.addWatcher('ownVehicle');
        form.addWatcher('currentVehicleBrand');
        const ownVehicle = form.getValue('ownVehicle') === 'yes';
        const currentVehicleBrand = form.getValue('currentVehicleBrand');
        const fetcher = async ({}) => {
            var _a, _b;
            if (!currentVehicleBrand)
                return [];
            const selectedBrand = (_b = (_a = form.context['currentVehicleBrandList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => vehicle.value === currentVehicleBrand)) === null || _b === void 0 ? void 0 : _b.meta;
            if (!selectedBrand)
                return [];
            return [
                ...selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.Models.map(model => ({ label: model.Name, value: `${model.ID}` })),
                {
                    value: 'Other',
                    label: locale.Other,
                },
            ];
        };
        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
    },
    'vehicleImage': ({ form }) => h(VehicleImageViewer, { form: form }),
    'choose': ({ locale }) => h("h1", { part: "section-title" }, locale.Choose),
    'current car': ({ locale }) => h("h1", { part: "section-title" }, locale['Your current car']),
    'contact information': ({ locale }) => h("h1", { part: "section-title" }, locale['Contact Information']),
    'city': ({ form, language, props }) => {
        const fetcher = async ({ signal }) => {
            var _a;
            const cityEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.cityApi;
            const response = await fetch(cityEndpoint, { signal, headers: { 'Accept-Language': language } });
            const options = (await response.json()).map(city => ({
                label: city.Name,
                value: `${city.ID}`,
                meta: Object.assign({}, city),
            }));
            return options;
        };
        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
    },
};
