const $ = require('jquery');

window.jQuery = $;

require('./common/area-common');
require('./area/more-list');

let categoryObj = {
    domInit: function() {
        this.el = {
            $tabItem: $('.tab-item'),
            $listItem: $('.tab-item').find('.list-item'),
            $leftPartItem: $('.left-part').find('.item'),
            $rightPart: $('.right-part')
        };
    },
    leftPartFillter: function() {
        let _this = this;

        _this.el.$leftPartItem.on('click', function() {
            $(this).addClass('active').siblings('div').removeClass('active');
            $(this).find('.right-part').show();
            $(this).siblings('.item').find('.right-part').hide();
        });
    },
    init: function() {
        let _this = this;

        this.domInit();
        _this.el.$tabItem.find('.city-name').on('click', function() {
            let $this = $(this).parents('.tab-item');

            $this.toggleClass('active').siblings('.tab-item').removeClass('active');
        });

        _this.el.$tabItem.find('.right-part:first').show();

        _this.el.$listItem.on('click', function() {
            let cityName = $(this).find('.name').text();

            $(this).addClass('active').siblings('div').removeClass('active');
            $(this).parents('.tab-item').find('.city-name .name').text(cityName);
            $(this).parents('.tab-item').toggleClass('active');
        });
        _this.leftPartFillter();
    }
};

$(
    function() {
        categoryObj.init();
    }
);