import {
    StoryObj,
    Meta,
    moduleMetadata,
    applicationConfig,
} from '@storybook/angular';

// modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';
import { NgxMaskModule } from 'ngx-mask';

// enums
import { ToolbarFilterStringEnum as ToolbarFilterString } from '../ca-map/enums/toolbar-filter-string.enum';
import { FilterActionsStringEnum } from './enums/filter-actions-string.enum';

// components
import { CaFilterComponent } from '../ca-filters/ca-filter.component';
import { importProvidersFrom } from '@angular/core';

// constants
import { DirectiveConstants } from './utils/constants/directive.constants';
import { StatusFilterConstants } from './utils/constants/status-filter.constants';

export default {
    title: 'Example/CaFilterComponent',
    component: CaFilterComponent,
    decorators: [
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
        moduleMetadata({
            imports: [
                // modules
                AngularSvgIconModule.forRoot(),
                NgxMaskModule.forRoot(),
                HttpClientModule,
            ],
            providers: [SvgIconRegistryService],
        }),
    ],

    tags: ['autodocs'],
    argTypes: {
        type: {
            control: ToolbarFilterString.TEXT,
            defaultValue: ToolbarFilterString.MONEY_FILTER,
        },
        icon: {
            control: ToolbarFilterString.TEXT,
            defaultValue: ToolbarFilterString.DOLLAR,
        },
        filterTitle: {
            control: ToolbarFilterString.TEXT,
            defaultValue: ToolbarFilterString.MONEY_FILTER_2,
        },
        isFilterActive: {
            control: ToolbarFilterString.BOOLEAN,
            defaultValue: false,
        },
        subType: {
            control: ToolbarFilterString.TEXT,
            defaultValue: ToolbarFilterString.EMPTY_STRING_PLACEHOLDER,
        },
        isFuelType: {
            control: ToolbarFilterString.BOOLEAN,
            defaultValue: false,
        },
        isLoadType: {
            control: ToolbarFilterString.BOOLEAN,
            defaultValue: true,
        },
        setFilterEmit: { action: FilterActionsStringEnum.SET_FILTER_EMIT },
        clearAllValuesEmit: {
            action: FilterActionsStringEnum.CLEAR_ALL_VALUES_EMIT,
        },
    },
} as Meta;

type Story = StoryObj<CaFilterComponent>;

export const MoneyDefault: Story = {
    args: {
        filterTitle: ToolbarFilterString.MONEY_FILTER_2,
        type: ToolbarFilterString.MONEY_FILTER,
        icon: ToolbarFilterString.DOLLAR,
        isFilterActive: false,
        subType: ToolbarFilterString.EMPTY_STRING_PLACEHOLDER,
    },
};

export const MoneyLoadType: Story = {
    args: {
        filterTitle: ToolbarFilterString.MONEY_FILTER_2,
        type: ToolbarFilterString.MONEY_FILTER,
        icon: ToolbarFilterString.DOLLAR,
        isFilterActive: false,
    },
};

export const MoneyFuelType: Story = {
    args: {
        filterTitle: ToolbarFilterString.MONEY_FILTER_2,
        type: ToolbarFilterString.MONEY_FILTER,
        icon: ToolbarFilterString.DOLLAR,
        isFilterActive: false,
        isFuelType: true,
        isLoadType: false,
    },
};

export const MoneyCustomerType: Story = {
    args: {
        filterTitle: ToolbarFilterString.MONEY_FILTER_2,
        type: ToolbarFilterString.MONEY_FILTER,
        icon: ToolbarFilterString.DOLLAR,
        isFilterActive: false,
        isFuelType: false,
        isLoadType: false,
    },
};

export const MilesDefault: Story = {
    args: {
        filterTitle: ToolbarFilterString.MILES_FILTER_2,
        type: ToolbarFilterString.MILES_FILTER,
        icon: ToolbarFilterString.MILES,
        isFilterActive: false,
        subType: ToolbarFilterString.EMPTY_STRING_PLACEHOLDER,
    },
};

export const StatusDispatch: Story = {
    args: {
        filterTitle: ToolbarFilterString.STATUS_FILTER_2,
        type: ToolbarFilterString.STATUS_FILTER,
        icon: ToolbarFilterString.BROKER_HALF_CIRCLE,
        isFilterActive: false,
        loadStatusOptionsArray: StatusFilterConstants.STATUS_DISPATCH_ARRAY,
    },
};

export const StatusPending: Story = {
    args: {
        filterTitle: ToolbarFilterString.STATUS_FILTER_2,
        type: ToolbarFilterString.STATUS_FILTER,
        icon: ToolbarFilterString.BROKER_HALF_CIRCLE,
        isFilterActive: false,
        loadStatusOptionsArray: StatusFilterConstants.STATUS_PENDING_ARRAY,
    },
};

export const StatusActive: Story = {
    args: {
        filterTitle: ToolbarFilterString.STATUS_FILTER_2,
        type: ToolbarFilterString.STATUS_FILTER,
        icon: ToolbarFilterString.BROKER_HALF_CIRCLE,
        isFilterActive: false,
        loadStatusOptionsArray: StatusFilterConstants.STATUS_ACTIVE_ARRAY,
    },
};

export const StatusClosed: Story = {
    args: {
        filterTitle: ToolbarFilterString.STATUS_FILTER_2,
        type: ToolbarFilterString.STATUS_FILTER,
        icon: ToolbarFilterString.BROKER_HALF_CIRCLE,
        isFilterActive: false,
        loadStatusOptionsArray: StatusFilterConstants.STATUS_CLOSED_ARRAY,
    },
};

export const TimeDropdown: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TIME_FILTER_DROPDOWN,
        timeSubType: ToolbarFilterString.PAST,
        icon: ToolbarFilterString.TIME,
        filterTitle: ToolbarFilterString.TIME_FILTER_2,
    },
};

export const TimePast: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TIME_FILTER,
        timeSubType: ToolbarFilterString.PAST,
        icon: ToolbarFilterString.TIME,
        filterTitle: ToolbarFilterString.TIME_FILTER_2,
    },
};

export const TimeFuture: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TIME_FILTER,
        timeSubType: ToolbarFilterString.FUTURE,
        icon: ToolbarFilterString.TIME,
        filterTitle: ToolbarFilterString.TIME_FILTER_2,
    },
};

export const TimeShort: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TIME_FILTER,
        timeSubType: ToolbarFilterString.SHORT,
        icon: ToolbarFilterString.TIME,
        filterTitle: ToolbarFilterString.TIME_FILTER_2,
    },
};

export const DispatcherDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.DISPATCHER_FILTER,
        icon: ToolbarFilterString.USER,
        filterTitle: ToolbarFilterString.DISPATCHER_FILTER_2,
        unselectedUser: DirectiveConstants.UNSELECTED_USER,
    },
};

export const DriverDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.DRIVER_FILTER,
        icon: ToolbarFilterString.USER,
        filterTitle: ToolbarFilterString.DRIVER_FILTER_2,
        unselectedUser: DirectiveConstants.DRIVER_ARRAY,
    },
};

export const FuelStopDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.FUEL_STOP_FILTER,
        icon: ToolbarFilterString.FUEL,
        filterTitle: ToolbarFilterString.FUEL_STOP_FILTER_2,
        unselectedUser: DirectiveConstants.FUEL_STOP_ARRAY,
    },
};

export const BrokerDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.BROKER_FILTER,
        icon: ToolbarFilterString.BROKER_HALF_CIRCLE,
        filterTitle: ToolbarFilterString.BROKER_FILTER_2,
        unselectedUser: DirectiveConstants.BROKER_ARRAY,
    },
};

export const StateFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.STATE_FILTER,
        icon: ToolbarFilterString.STATE,
        filterTitle: ToolbarFilterString.STATE_FILTER_2,
    },
};

export const TruckTypeDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TRUCK_TYPE_FILTER,
        icon: ToolbarFilterString.TRUCK,
        filterTitle: ToolbarFilterString.TRUCK_TYPE_FILTER_2,
        truckTypeArray: DirectiveConstants.TRUCK_TYPE_ARRAY,
    },
};

export const TrailerTypeDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TRAILER_TYPE_FILTER,
        icon: ToolbarFilterString.TRAILER,
        filterTitle: ToolbarFilterString.TRAILER_TYPE_FILTER_2,
        trailerTypeArray: DirectiveConstants.TRAILER_TYPE_ARRAY,
    },
};

export const TruckUnitDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TRUCK_TYPE_FILTER,
        icon: ToolbarFilterString.TRUCK,
        filterTitle: ToolbarFilterString.TRUCK_UNIT_FILTER_2,
        truckTypeArray: DirectiveConstants.TRUCK_TYPE_ARRAY,
    },
};

export const TrailerUnitDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TRAILER_TYPE_FILTER,
        icon: ToolbarFilterString.TRAILER,
        filterTitle: ToolbarFilterString.TRAILER_UNIT_FILTER_2,
        trailerTypeArray: DirectiveConstants.TRAILER_TYPE_ARRAY,
    },
};

export const PmFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.PM_FILTER,
        icon: ToolbarFilterString.DEFAULT_PM,
        filterTitle: ToolbarFilterString.PM_FILTER_2,
        pmFilterArray: DirectiveConstants.PM_FILTER_ARRAY,
    },
};

export const ServiceFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.CATEGORY_REPAIR_FILTER,
        icon: ToolbarFilterString.IC_KEY_REPAIR,
        filterTitle: ToolbarFilterString.SERVICE_FILTER_2,
        pmFilterArray: DirectiveConstants.CATEGORY_REPAIR_ARRAY,
    },
};

export const FuelItemFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.FUEL_ITEM_FILTER,
        icon: ToolbarFilterString.FUEL,
        filterTitle: ToolbarFilterString.FUEL_ITEM_FILTER_2,
        pmFilterArray: DirectiveConstants.FUEL_ITEM_FILTER_ARRAY,
    },
};

export const DepartmentFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.DEPARTMENT_FILTER,
        icon: ToolbarFilterString.IC_KEY_REPAIR,
        filterTitle: ToolbarFilterString.DEPARTMENT_FILTER_2,
        pmFilterArray: DirectiveConstants.DEPARTMANT_ARRAY,
    },
};

export const ParkingFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.PARKING_FILTER,
        icon: ToolbarFilterString.IC_KEY_REPAIR,
        filterTitle: ToolbarFilterString.PARKING_FILTER_2,
        pmFilterArray: DirectiveConstants.PARKING_ARRAY,
    },
};

export const TagFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.TAG_FILTER,
        icon: ToolbarFilterString.IC_KEY_REPAIR,
        filterTitle: ToolbarFilterString.TAG_FILTER_2,
        pmFilterArray: DirectiveConstants.TAG_ARRAY,
    },
};

export const ActionFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.ACTION_FILTER,
        icon: ToolbarFilterString.IC_KEY_REPAIR,
        filterTitle: ToolbarFilterString.ACTION_FILTER_2,
        pmFilterArray: DirectiveConstants.ACTION_ARRAY,
    },
};

export const LabelFilterDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.LABEL_FILTER,
        icon: ToolbarFilterString.LABEL,
        filterTitle: ToolbarFilterString.LABEL_FILTER_2,
        pmFilterArray: DirectiveConstants.LABEL_ARRAY,
    },
};

export const UserDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.USER_FILTER,
        icon: ToolbarFilterString.USER,
        filterTitle: ToolbarFilterString.USER_FILTER_2,
        userGroup: DirectiveConstants.USER_GROUP_ARRAY,
    },
};

export const ModuleDefault: Story = {
    args: {
        isFilterActive: false,
        type: ToolbarFilterString.MODULE_FILTER,
        icon: ToolbarFilterString.USER,
        filterTitle: ToolbarFilterString.MODULE_FILTER_2,
        userGroup: DirectiveConstants.MODULE_GROUP_ARRAY,
    },
};

export const LocationFilterDefault: Story = {
    args: {
        isFilterActive: false,
        icon: ToolbarFilterString.IC_ADDRESS,
        type: ToolbarFilterString.LOCATION_FILTER,
        filterTitle: ToolbarFilterString.AREA_FILTER,
    },
};

export const ViolationDefault: Story = {
    args: {
        filterTitle: ToolbarFilterString.VIOLATION_FILTER_2,
        type: ToolbarFilterString.VIOLATION_FILTER,
        icon: ToolbarFilterString.DOLLAR,
        isFilterActive: false,
        subType: ToolbarFilterString.EMPTY_STRING_PLACEHOLDER,
    },
};