import { Store, ICabinViewModel, IFormState, ACTIONS } from '../services/Store';

    const template = `
    <div class="form-group">

        <label class="col-xs-12 col-is-4 col-sm-4 col-lg-3 control-label" data-ng-bind="'cruiseData.cabintype' | translate"></label>

        <div class="col-xs-12 col-is-8 col-sm-8 col-lg-9">
            <span data-ng-show="ctrl.isLoading" class="loadingIndicator"></span>
            <select class="form-control"
                    id="cabinSelect"
                    data-ng-disabled="ctrl.isLoading"
                    data-ng-if="ctrl.cabintypeSelect.length && !ctrl.showPerNightPrice"
                    data-ng-model="ctrl.selectedCabin"
                    data-ng-change="ctrl.onChange(ctrl.selectedCabin)"
                    data-ng-options="cabintype as cabintype.title group by (cabintype.kindName | translate) for cabintype in ctrl.cabintypeSelect track by cabintype.id">
            </select>
            <select class="form-control"
                    id="cabinSelect"
                    data-ng-disabled="ctrl.isLoading"
                    data-ng-if="ctrl.cabintypeSelect.length && ctrl.showPerNightPrice"
                    data-ng-model="ctrl.selectedCabin"
                    data-ng-change="ctrl.onChange(ctrl.selectedCabin)"
                    data-ng-options="cabintype as cabintype.perNightTitle group by (cabintype.kindName | translate) for cabintype in ctrl.cabintypeSelect track by cabintype.id">
            </select>
            <img data-ng-show="ctrl.isLoading"
                src="/wp-content/themes/dreamlines/assets/images/icons/loading.gif"
                class="loadingIndicator text-center"
                alt="loading ...">
        </div>
    </div>`;

    class Controller implements ng.IComponentController {

        isLoading:boolean;
        selectedCabinId:string;
        selectedCabin: ICabinViewModel;
        cabintypeSelect:ICabinViewModel[];
        showPerNightPrice: boolean;

        /**
         * function for view that will dispatch the action at the store
         * @param payload
         */
        onChange = (payload:ICabinViewModel) => {
            this.store
                .dispatchState({
                    type: ACTIONS.SET_CABIN_TYPE,
                    payload: payload.id,
                }, 'dlSelectCabin');
            console.log('payload', payload);
        };

        public static $inject = [
            'store'
        ];

        constructor(private store:Store) {
            this.isLoading = store.getIsLoading();
            store.isLoading.subscribe(e => (this.isLoading = e));

            store.getLastState().then(this.assign);
            store.subscribe(this.assign);
        }

        assign = ({ selectedCabinId, selectedCabin, cabintypeSelect, configuration }:IFormState) => {
            this.selectedCabinId = selectedCabinId;
            this.selectedCabin = selectedCabin;
            this.cabintypeSelect = cabintypeSelect;
        };

    }

    const dlSelectCabin:ng.IComponentOptions = {
        template: template,
        controller: Controller,
        controllerAs: 'ctrl',
        bindings: {
            showPerNightPrice: '<'
        }

    };

    export { dlSelectCabin };