import React, { FC } from 'react';
import { useMutation } from '@apollo/react-hooks';
import { formatMessage } from '@orchard/frontend-localization';
import { SetDateFilter } from 'src/definitions/SetDateFilter';
import SET_DATE_FILTER from 'src/mutations/setDateFilter.gql';
import { SelectInput } from '@orchard/frontend-react-components';
import { useComparisonFilters } from 'src/queries';
import { DATE_PERIODS } from 'src/constants/periods';
import { getPeriodName } from 'src/selectors/filters';
import { isAbsolutePeriod } from 'src/utils/datePeriod';

const DateFilter: FC<{ className: string }> = ({ className }) => {
    const { selectedSongIds, dateFilter } = useComparisonFilters();
    const [setDateFilter] = useMutation<SetDateFilter>(SET_DATE_FILTER);

    const handleDateSelection = (val: string) => (
        setDateFilter({ variables: { datePeriod: val } })
    );

    const dateOptions = [
        { label: formatMessage('period.releaseView'), disabled: true },
        ...DATE_PERIODS.filter(period => !isAbsolutePeriod(period)).map(period => ({
            label: getPeriodName(period), value: period
        })),
        { label: formatMessage('period.standardView'), disabled: true },
        ...DATE_PERIODS.filter(period => isAbsolutePeriod(period)).map(period => ({
            label: getPeriodName(period), value: period
        }))
    ];

    return (
        <div className={`${className}-filter ${className}-date`}>
            <SelectInput
                disabled={selectedSongIds.length === 0}
                clearable={false}
                onChange={handleDateSelection}
                searchable={false}
                options={dateOptions}
                value={dateFilter}
            />
        </div>
    );
};

export default DateFilter;