import React from 'react';
import { Definition } from 'sync-ql';
import {
    SvgIcon,
    MenuItem,
    Menu,
    Button,
    Tooltip,
} from '@mui/material';
import {
    DataFilterSet,
    DataFilterType,
    DataFilterOperation,
    FiltersMessage,
    DataOption,
} from '../types/filter.type';
import { FilterLabel } from './style';
import { DataTableFilterText } from './filter.text';
import { DataTableFilterDate } from './filter.date';
import { DataTableFilterNumber } from './filter.number';
import { DataTableFilterAuto } from './filter.auto';
import { DataTableFilterBoolean } from './filter.boolean';

export const operationsConstrains: Definition = {
    boolean: {
        equal: true,
        notEqual: true,
    },
    number: {
        equal: true,
        notEqual: true,
        greaterThan: true,
        greaterThanOrEqual: true,
        lessThan: true,
        lessThanOrEqual: true,
        between: true,
    },
    date: {
        equal: true,
        notEqual: true,
        greaterThan: true,
        greaterThanOrEqual: true,
        lessThan: true,
        lessThanOrEqual: true,
        between: true,
    },
    set: {
        auto: true,
    },
    text: {
        auto: true,
        equal: true,
        notEqual: true,
        greaterThan: true,
        greaterThanOrEqual: true,
        lessThan: true,
        lessThanOrEqual: true,
        startsWith: true,
        endsWith: true,
        contains: true,
        notContains: true,
        between: true,
    },
}

interface DataTableFilterProps {
    type: DataFilterSet,
    label: string,
    operation: DataFilterOperation,
    range?: [DataFilterType, DataFilterType],
    value: DataFilterType | [DataFilterType, DataFilterType],
    messages: FiltersMessage,
    onChange: (operation: DataFilterOperation, value: DataFilterType | [DataFilterType, DataFilterType]) => void,
    onOptionsLoad: (text: string) => Promise<DataOption[]>,
}

export const DataTableFilter: React.FC<DataTableFilterProps> = ({ type, label, operation, range, value, messages, onChange, onOptionsLoad }) => {
    const [operationMenuAnchor, setOperationMenuAnchor] = React.useState<null | HTMLElement>(null);

    const handleBooleanChange = (value: boolean | null) => {
        onChange(operation, value);
    }
    const handleTextChange = (value: string | null | (string | null)[]) => {
        onChange(operation, value as any);
    }
    const handleNumberChange = (value: string | number | null | (string | number | null)[]) => {
        onChange(operation, value as any);
    }
    const handleDateChange = (value: Date | null | (Date | null)[]) => {
        onChange(operation, value as any);
    }
    const handleAutoChange = (value: DataOption | null) => {
        onChange(operation, value as any);
    }
    const handleLoadOptions = async (inputText: string): Promise<DataOption[]> => {
        if (!!onOptionsLoad) {
            return await onOptionsLoad(inputText);
        }
        return [];
    }
    const getOperations = () => {
        const result: {
            [key: string]: {
                value: DataFilterOperation,
                icon: JSX.Element,
                component: JSX.Element
            }
        } = {};
        const style: React.CSSProperties = label
            ? undefined
            : {
                width: 'calc(100% - 10px)',
                maxWidth: 'calc(100% - 10px)'
            }

        switch (type) {
            case 'boolean':
                result['equal'] = {
                    value: 'equal',
                    icon:
                        <Tooltip title={messages.equal} placement="left">
                            <span>
                                <EqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterBoolean style={style} messages={messages} value={value} onChange={handleBooleanChange} />
                }
                result['notEqual'] = {
                    value: 'notEqual',
                    icon:
                        <Tooltip title={messages.notEqual} placement="left">
                            <span>
                                <NotEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterBoolean style={style} messages={messages} value={value} onChange={handleBooleanChange} />
                }
                break;
            case 'number':
                result['equal'] = {
                    value: 'equal',
                    icon:
                        <Tooltip title={messages.equal} placement="left">
                            <span>
                                <EqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['notEqual'] = {
                    value: 'notEqual',
                    icon:
                        <Tooltip title={messages.notEqual} placement="left">
                            <span>
                                <NotEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['greaterThan'] = {
                    value: 'greaterThan',
                    icon:
                        <Tooltip title={messages.greaterThan} placement="left">
                            <span>
                                <GreaterThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['greaterThanOrEqual'] = {
                    value: 'greaterThanOrEqual',
                    icon:
                        <Tooltip title={messages.greaterThanOrEqual} placement="left">
                            <span>
                                <GreaterThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['lessThan'] = {
                    value: 'lessThan',
                    icon:
                        <Tooltip title={messages.lessThan} placement="left">
                            <span>
                                <LessThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['lessThanOrEqual'] = {
                    value: 'lessThanOrEqual',
                    icon:
                        <Tooltip title={messages.lessThanOrEqual} placement="left">
                            <span>
                                <LessThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                result['between'] = {
                    value: 'between',
                    icon:
                        <Tooltip title={messages.between} placement="left">
                            <span>
                                <BetweenToIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterNumber between={true} style={style} messages={messages} range={range} value={value} onChange={handleNumberChange} />
                }
                break;
            case 'date':
                result['equal'] = {
                    value: 'equal',
                    icon:
                        <Tooltip title={messages.equal} placement="left">
                            <span>
                                <EqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['notEqual'] = {
                    value: 'notEqual',
                    icon:
                        <Tooltip title={messages.notEqual} placement="left">
                            <span>
                                <NotEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['greaterThan'] = {
                    value: 'greaterThan',
                    icon:
                        <Tooltip title={messages.greaterThan} placement="left">
                            <span>
                                <GreaterThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['greaterThanOrEqual'] = {
                    value: 'greaterThanOrEqual',
                    icon:
                        <Tooltip title={messages.greaterThanOrEqual} placement="left">
                            <span>
                                <GreaterThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['lessThan'] = {
                    value: 'lessThan',
                    icon:
                        <Tooltip title={messages.lessThan} placement="left">
                            <span>
                                <LessThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['lessThanOrEqual'] = {
                    value: 'lessThanOrEqual',
                    icon:
                        <Tooltip title={messages.lessThanOrEqual} placement="left">
                            <span>
                                <LessThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                result['between'] = {
                    value: 'between',
                    icon:
                        <Tooltip title={messages.between} placement="left">
                            <span>
                                <BetweenToIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterDate between={true} style={style} messages={messages} range={range} value={value} onChange={handleDateChange} />
                }
                break;
            case 'set':
                result['auto'] = {
                    value: 'auto',
                    icon:
                        <Tooltip title={messages.auto} placement="left">
                            <span>
                                <AutoIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterAuto
                        style={style} messages={messages}
                        value={value as any}
                        options={handleLoadOptions}
                        onChange={handleAutoChange} />
                }
                break;
            default:
                result['auto'] = {
                    value: 'auto',
                    icon:
                        <Tooltip title={messages.auto} placement="left">
                            <span>
                                <AutoIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterAuto
                        style={style} messages={messages}
                        value={value as any}
                        options={handleLoadOptions}
                        onChange={handleAutoChange} />
                }
                result['equal'] = {
                    value: 'equal',
                    icon:
                        <Tooltip title={messages.equal} placement="left">
                            <span>
                                <EqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['notEqual'] = {
                    value: 'notEqual',
                    icon:
                        <Tooltip title={messages.notEqual} placement="left">
                            <span>
                                <NotEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['greaterThan'] = {
                    value: 'greaterThan',
                    icon:
                        <Tooltip title={messages.greaterThan} placement="left">
                            <span>
                                <GreaterThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['greaterThanOrEqual'] = {
                    value: 'greaterThanOrEqual',
                    icon:
                        <Tooltip title={messages.greaterThanOrEqual} placement="left">
                            <span>
                                <GreaterThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['lessThan'] = {
                    value: 'lessThan',
                    icon:
                        <Tooltip title={messages.lessThan} placement="left">
                            <span>
                                <LessThanIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['lessThanOrEqual'] = {
                    value: 'lessThanOrEqual',
                    icon:
                        <Tooltip title={messages.lessThanOrEqual} placement="left">
                            <span>
                                <LessThanOrEqualsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['startsWith'] = {
                    value: 'startsWith',
                    icon:
                        <Tooltip title={messages.startsWith} placement="left">
                            <span>
                                <StartsWithIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['endsWith'] = {
                    value: 'endsWith',
                    icon:
                        <Tooltip title={messages.endsWith} placement="left">
                            <span>
                                <EndsWithIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['contains'] = {
                    value: 'contains',
                    icon:
                        <Tooltip title={messages.contains} placement="left">
                            <span>
                                <ContainsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['notContains'] = {
                    value: 'notContains',
                    icon:
                        <Tooltip title={messages.notContains} placement="left">
                            <span>
                                <NotContainsIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                result['between'] = {
                    value: 'between',
                    icon:
                        <Tooltip title={messages.between} placement="left">
                            <span>
                                <BetweenToIcon />
                            </span>
                        </Tooltip>,
                    component: <DataTableFilterText between={true} style={style} messages={messages} value={value} onChange={handleTextChange} />
                }
                break;
        }
        return result;
    }
    const handleOpenOperationMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
        setOperationMenuAnchor(event.currentTarget);
    }
    const handleCloseOperationMenu = () => {
        setOperationMenuAnchor(null);
    }
    const handleOperationChange = (operation: DataFilterOperation) =>
        () => {
            onChange(operation, null);
            setOperationMenuAnchor(null);
        }
    const operations = getOperations();

    return (
        <tr>
            {
                label &&
                <td>
                    <FilterLabel>
                        {label}
                    </FilterLabel>
                </td>
            }
            {
                label &&
                <td>
                    <Button
                        color="inherit"
                        onClick={handleOpenOperationMenu}>
                        <div style={{ margin: '4px 0px -4px 0px' }}>
                            {
                                operations[operation].icon
                            }
                        </div>
                    </Button>
                    <Menu
                        anchorEl={operationMenuAnchor}
                        anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'right',
                        }}
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        keepMounted
                        open={Boolean(operationMenuAnchor)}
                        onClose={handleCloseOperationMenu}>
                        {
                            Object.values(operations).map(o => (
                                <MenuItem key={o.value} value={o.value} onClick={handleOperationChange(o.value)}>
                                    {o.icon}
                                </MenuItem>
                            ))
                        }
                    </Menu>
                </td>
            }
            <td colSpan={label ? 1 : 3}>
                {
                    operations[operation].component
                }
            </td>
        </tr>
    )
}

const AutoIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zM2 16h8v-2H2v2zm19.5-4.5L23 13l-6.99 7-4.51-4.5L13 14l3.01 3 5.49-5.5z" />
        </g>
    </SvgIcon>
)
const ContainsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M6.094 19.563l-2.031 0.281c-0.646 0.094-1.13 0.266-1.453 0.516-0.302 0.24-0.453 0.646-0.453 1.219 0 0.438 0.138 0.799 0.414 1.086s0.664 0.419 1.164 0.398c0.708 0 1.281-0.24 1.719-0.719 0.427-0.49 0.641-1.125 0.641-1.906v-0.875zM8.234 24.641h-2.172v-1.641c-0.677 1.24-1.661 1.859-2.953 1.859-0.927 0-1.682-0.276-2.266-0.828-0.552-0.552-0.828-1.292-0.828-2.219 0-1.927 1.068-3.052 3.203-3.375l2.875-0.438c0-1.469-0.656-2.203-1.969-2.203-1.177 0-2.224 0.427-3.141 1.281v-2.078c1.010-0.656 2.198-0.984 3.563-0.984 2.458 0 3.687 1.302 3.687 3.906v6.719zM14.734 16.797c0.521-0.583 1.167-0.875 1.938-0.875 0.74 0 1.323 0.281 1.75 0.844 0.448 0.583 0.672 1.38 0.672 2.391 0 1.188-0.24 2.13-0.719 2.828-0.49 0.677-1.13 1.016-1.922 1.016-0.719 0-1.302-0.271-1.75-0.813-0.427-0.51-0.641-1.141-0.641-1.891v-1.266c-0.021-0.906 0.203-1.651 0.672-2.234zM16.969 24.859c1.375 0 2.443-0.521 3.203-1.562 0.781-1.042 1.172-2.427 1.172-4.156 0-1.542-0.354-2.771-1.063-3.688-0.688-0.958-1.651-1.438-2.891-1.438-1.427 0-2.531 0.693-3.313 2.078v-6.781h-2.156v15.328h2.172v-1.5c0.677 1.146 1.635 1.719 2.875 1.719zM22.266 6.125c0.135 0 0.245 0.063 0.328 0.188 0.104 0.073 0.156 0.182 0.156 0.328v22.953c0 0.125-0.052 0.24-0.156 0.344-0.083 0.115-0.193 0.172-0.328 0.172h-12.281c-0.146 0-0.266-0.057-0.359-0.172-0.115-0.115-0.172-0.229-0.172-0.344v-22.953c0-0.135 0.057-0.245 0.172-0.328 0.094-0.125 0.214-0.188 0.359-0.188h12.281zM31.531 24.141c-0.76 0.479-1.693 0.719-2.797 0.719-1.427 0-2.589-0.479-3.484-1.438-0.865-0.958-1.286-2.198-1.266-3.719 0-1.688 0.448-3.052 1.344-4.094 0.917-1.042 2.208-1.573 3.875-1.594 0.854 0 1.63 0.177 2.328 0.531v2.156c-0.677-0.531-1.391-0.792-2.141-0.781-0.938 0-1.714 0.339-2.328 1.016-0.594 0.677-0.891 1.552-0.891 2.625 0 1.042 0.297 1.88 0.891 2.516 0.521 0.615 1.25 0.922 2.188 0.922 0.813 0 1.573-0.297 2.281-0.891v2.031z" />
        </g>
    </SvgIcon>
)
const NotContainsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M5.828 20.469v0.328c0 0.385-0.057 0.667-0.172 0.844-0.052 0.083-0.117 0.177-0.195 0.281s-0.174 0.224-0.289 0.359c-0.458 0.521-1.031 0.771-1.719 0.75-0.521 0-0.927-0.141-1.219-0.422-0.292-0.292-0.438-0.661-0.438-1.109 0-0.156 0.010-0.273 0.031-0.352s0.052-0.141 0.094-0.188 0.094-0.086 0.156-0.117 0.141-0.078 0.234-0.141c0.031-0.031 0.078-0.070 0.141-0.117s0.146-0.086 0.25-0.117h3.125zM14.016 18.328c0.010-0.406 0.070-0.729 0.18-0.969s0.289-0.49 0.539-0.75c0.479-0.604 1.13-0.906 1.953-0.906 0.75 0 1.344 0.292 1.781 0.875 0.198 0.25 0.349 0.495 0.453 0.734s0.172 0.578 0.203 1.016h-5.109zM19.078 20.469c-0.063 0.427-0.146 0.708-0.25 0.844-0.052 0.073-0.109 0.159-0.172 0.258l-0.219 0.352c-0.469 0.688-1.135 1.031-2 1.031-0.708 0-1.297-0.271-1.766-0.813l-0.305-0.359c-0.089-0.104-0.159-0.198-0.211-0.281-0.104-0.167-0.156-0.448-0.156-0.844v-0.188h5.078zM33.344 18.328l-6.875 0c0.031-0.198 0.070-0.372 0.117-0.523s0.107-0.284 0.18-0.398 0.154-0.224 0.242-0.328l0.305-0.344c0.604-0.688 1.391-1.031 2.359-1.031 0.771 0 1.51 0.266 2.219 0.797v-2.234c-0.75-0.333-1.552-0.5-2.406-0.5-1.667 0-2.974 0.531-3.922 1.594-0.396 0.427-0.708 0.859-0.938 1.297s-0.385 0.995-0.469 1.672h-2.719c-0.021-0.719-0.117-1.31-0.289-1.773s-0.424-0.914-0.758-1.352c-0.729-0.938-1.719-1.417-2.969-1.438-1.479 0-2.615 0.708-3.406 2.125v-6.953h-2.266v9.391h-3.75v-0.594c0-2.646-1.25-3.969-3.75-3.969-1.365 0-2.583 0.328-3.656 0.984v2.125c0.99-0.865 2.063-1.297 3.219-1.297 1.344 0 2.016 0.75 2.016 2.25l-2.953 0.125c-0.25 0.021-0.487 0.070-0.711 0.148l-0.633 0.227h-3.328v2.141h1.828l-0.281 0.594c-0.073 0.135-0.109 0.37-0.109 0.703 0 0.938 0.276 1.682 0.828 2.234 0.542 0.573 1.313 0.859 2.313 0.859 1.281 0 2.297-0.635 3.047-1.906v1.656h2.172v-4.141h3.75v4.141h2.297v-1.516c0.677 1.188 1.661 1.776 2.953 1.766 1.385 0 2.464-0.531 3.234-1.594 0.302-0.385 0.557-0.792 0.766-1.219 0.198-0.385 0.339-0.911 0.422-1.578h2.703c0.021 0.708 0.141 1.25 0.359 1.625 0.115 0.198 0.253 0.401 0.414 0.609s0.346 0.427 0.555 0.656c0.906 1 2.099 1.5 3.578 1.5 1.104 0 2.057-0.245 2.859-0.734v-2.109c-0.75 0.604-1.526 0.917-2.328 0.938-0.979 0-1.74-0.318-2.281-0.953l-0.328-0.328c-0.094-0.094-0.177-0.195-0.25-0.305s-0.13-0.234-0.172-0.375-0.073-0.315-0.094-0.523h6.906v-2.141zM33.297 5.688c0.146 0 0.266 0.047 0.359 0.141 0.104 0.104 0.156 0.229 0.156 0.375v23.484c0 0.135-0.052 0.255-0.156 0.359-0.094 0.115-0.214 0.172-0.359 0.172h-35.078c-0.135 0-0.26-0.057-0.375-0.172-0.094-0.115-0.135-0.234-0.125-0.359v-23.484c0-0.104 0.042-0.229 0.125-0.375 0.104-0.094 0.229-0.141 0.375-0.141h35.078z" />
        </g>
    </SvgIcon>
)
const StartsWithIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M6.109 20.688c0 0.813-0.219 1.474-0.656 1.984-0.448 0.531-1.010 0.786-1.688 0.766-0.51 0-0.896-0.141-1.156-0.422-0.302-0.292-0.443-0.667-0.422-1.125 0-0.615 0.151-1.042 0.453-1.281 0.177-0.135 0.378-0.245 0.602-0.328s0.497-0.146 0.82-0.188l2.047-0.313v0.906zM8.203 18.063c0-2.688-1.219-4.031-3.656-4.031-1.333 0-2.51 0.339-3.531 1.016v2.141c0.917-0.885 1.948-1.328 3.094-1.328 1.333 0 2 0.766 2 2.297l-2.891 0.453c-2.115 0.333-3.161 1.516-3.141 3.547 0 0.958 0.266 1.724 0.797 2.297 0.542 0.573 1.292 0.859 2.25 0.859 1.292 0 2.26-0.641 2.906-1.922v1.688h2.172v-7.016zM14.703 16.906c0.479-0.604 1.109-0.906 1.891-0.906 0.76 0 1.344 0.297 1.75 0.891 0.438 0.615 0.656 1.443 0.656 2.484 0 1.219-0.229 2.198-0.688 2.938-0.469 0.719-1.109 1.078-1.922 1.078-0.719 0-1.286-0.281-1.703-0.844-0.448-0.542-0.672-1.208-0.672-2v-1.313c-0.010-0.938 0.219-1.714 0.688-2.328zM16.906 25.313c1.365 0 2.422-0.542 3.172-1.625 0.771-1.115 1.156-2.563 1.156-4.344 0-1.604-0.339-2.885-1.016-3.844-0.698-0.979-1.661-1.469-2.891-1.469-1.438 0-2.531 0.719-3.281 2.156v-7.078h-2.188v15.969h2.172v-1.563c0.667 1.198 1.625 1.797 2.875 1.797zM31.375 24.563c-0.75 0.5-1.672 0.75-2.766 0.75-1.427 0-2.583-0.505-3.469-1.516-0.885-0.969-1.318-2.26-1.297-3.875 0-1.74 0.464-3.161 1.391-4.266 0.927-1.063 2.198-1.604 3.813-1.625 0.844 0 1.62 0.172 2.328 0.516v2.25c-0.688-0.563-1.406-0.828-2.156-0.797-0.927 0-1.688 0.349-2.281 1.047-0.583 0.698-0.875 1.609-0.875 2.734 0 1.094 0.281 1.969 0.844 2.625 0.542 0.656 1.286 0.984 2.234 0.984 0.781 0 1.526-0.323 2.234-0.969v2.141zM22.172 5.844c0.115 0 0.224 0.052 0.328 0.156 0.094 0.125 0.141 0.25 0.141 0.375v23.844c0 0.156-0.047 0.286-0.141 0.391-0.115 0.094-0.224 0.141-0.328 0.141h-23.469c-0.125 0-0.24-0.047-0.344-0.141-0.094-0.104-0.141-0.234-0.141-0.391v-23.844c0-0.125 0.047-0.25 0.141-0.375 0.104-0.104 0.219-0.156 0.344-0.156h23.469z" />
        </g>
    </SvgIcon>
)
const EndsWithIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M6.234 19.344l-2.047 0.313c-0.625 0.083-1.104 0.26-1.438 0.531-0.302 0.24-0.453 0.651-0.453 1.234 0 0.469 0.141 0.852 0.422 1.148s0.672 0.435 1.172 0.414c0.677 0 1.234-0.25 1.672-0.75 0.448-0.51 0.672-1.167 0.672-1.969v-0.922zM8.359 24.578h-2.141v-1.656c-0.667 1.26-1.656 1.891-2.969 1.891-0.938 0-1.698-0.276-2.281-0.828-0.542-0.573-0.813-1.328-0.813-2.266 0-2.021 1.063-3.188 3.188-3.5l2.891-0.484c0-1.51-0.661-2.266-1.984-2.266-1.167 0-2.214 0.443-3.141 1.328v-2.125c1.042-0.677 2.224-1.016 3.547-1.016 2.469 0 3.703 1.333 3.703 4v6.922zM14.906 16.516c0.49-0.615 1.13-0.922 1.922-0.922 0.76 0 1.339 0.297 1.734 0.891 0.438 0.615 0.656 1.438 0.656 2.469 0 1.208-0.229 2.182-0.688 2.922-0.469 0.698-1.115 1.047-1.938 1.047-0.708 0-1.276-0.276-1.703-0.828-0.458-0.552-0.688-1.214-0.688-1.984v-1.281c-0.010-0.948 0.224-1.719 0.703-2.313zM17.125 24.813c1.354 0 2.417-0.531 3.188-1.594 0.781-1.073 1.172-2.505 1.172-4.297 0-1.604-0.349-2.87-1.047-3.797-0.698-0.979-1.661-1.469-2.891-1.469-1.438 0-2.542 0.714-3.313 2.141v-7h-2.203v15.781h2.188v-1.531c0.677 1.177 1.646 1.766 2.906 1.766zM31.688 21.969c-0.698 0.635-1.453 0.953-2.266 0.953-0.958 0-1.703-0.323-2.234-0.969-0.563-0.667-0.849-1.536-0.859-2.609 0-1.115 0.297-2.016 0.891-2.703 0.594-0.698 1.359-1.047 2.297-1.047 0.76 0 1.484 0.266 2.172 0.797v-2.219c-0.708-0.344-1.49-0.516-2.344-0.516-1.625 0-2.906 0.536-3.844 1.609-0.938 1.083-1.406 2.495-1.406 4.234 0 1.594 0.438 2.875 1.313 3.844 0.885 0.979 2.052 1.469 3.5 1.469 1.083 0 2.010-0.245 2.781-0.734v-2.109zM33.188 5.563c0.104 0 0.219 0.047 0.344 0.141 0.094 0.146 0.141 0.276 0.141 0.391v23.578c0 0.146-0.047 0.281-0.141 0.406-0.125 0.094-0.24 0.141-0.344 0.141h-23.625c-0.125 0-0.24-0.047-0.344-0.141-0.094-0.135-0.135-0.271-0.125-0.406v-23.578c0-0.115 0.042-0.245 0.125-0.391 0.094-0.094 0.208-0.141 0.344-0.141h23.625z" />
        </g>
    </SvgIcon>
)
const EqualsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M29.438 11.797v2.75h-26.922v-2.75h26.922zM29.438 17.406v2.75h-26.922v-2.75h26.922z" />
        </g>
    </SvgIcon>
)
const NotEqualsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M16.906 11.797l3.016-6.547 2.094 1-2.547 5.547h9.969v2.75h-11.234l-1.328 2.859h12.563v2.75h-13.828l-2.875 6.281-2.094-0.984 2.438-5.297h-10.563v-2.75h11.828l1.297-2.859h-13.125v-2.75h14.391z" />
        </g>
    </SvgIcon>
)
const LessThanIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M22.75 7.438l1.375 2.375-10.781 6.234 10.781 6.25-1.375 2.375-14.906-8.609z" />
        </g>
    </SvgIcon>
)
const LessThanOrEqualsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M23.828 5.719l1.375 2.375-10.813 6.234 10.813 6.25-1.375 2.375-14.922-8.609zM23.047 24.266l-1.375 2.375-14.922-8.609 1.375-2.391z" />
        </g>
    </SvgIcon>
)
const GreaterThanIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M24.125 16.047l-14.906 8.625-1.375-2.375 10.781-6.25-10.781-6.234 1.375-2.375z" />
        </g>
    </SvgIcon>
)
const GreaterThanOrEqualsIcon = () => (
    <SvgIcon fontSize="small" width="32" height="32" overflow="hidden" viewBox="0 0 32 32">
        <g>
            <path d="M23.031 14.328l-14.906 8.625-1.375-2.375 10.797-6.25-10.797-6.234 1.375-2.375zM23.828 15.641l1.375 2.391-14.938 8.609-1.375-2.375z" />
        </g>
    </SvgIcon>
)
const BetweenToIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
        </g>
    </SvgIcon>
)