import React, { FC, useState } from 'react';
import { useMutation } from '@apollo/react-hooks';
import { SetStoreFilter } from 'src/definitions/SetStoreFilter';
import SET_STORE_FILTER from 'src/mutations/setStoreFilter.gql';
import { SelectInput } from '@orchard/frontend-react-components';
import { useComparisonFilters, useAnalyticsFeeds } from 'src/queries';
import { getStoreName } from 'src/selectors/filters';

const StoreFilter: FC<{ className: string }> = ({ className }) => {
    const { selectedSongIds, storeFilter } = useComparisonFilters();
    const { storesList } = useAnalyticsFeeds();
    const [setStoreFilter] = useMutation<SetStoreFilter>(SET_STORE_FILTER);
    const [selectedStore, setSelectedStore] = useState<number>(
        storeFilter.length ? storeFilter[0] : 0
    );

    const handleStoreSelection = (val: number) => {
        setSelectedStore(val || 0);
        setStoreFilter({ variables: { stores: val === 0 ? [] : [val] } });
    };

    const selectValue = storeFilter.length === 0 ? 0 : storeFilter[0];
    const storeOptions = [
        { label: getStoreName(), value: 0 },
        ...storesList
    ];

    return (
        <div className={`${className}-filter ${className}-stores`}>
            <SelectInput
                disabled={selectedSongIds.length === 0}
                clearable={selectedStore !== 0}
                onChange={handleStoreSelection}
                options={storeOptions}
                value={selectValue}
            />
        </div>
    );
};

export default StoreFilter;