import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { useTheme } from 'styled-components';
import { getThemePropSelector } from '../../utils';
import { Icon } from '../icon/Icon.component';
import { Select, } from '../selectv2/Selectv2.component';
const SelectStyle = styled(Select) `
  .sc-select__control {
    background-color: ${getThemePropSelector('buttonSecondary')};

    &.sc-select__control--is-focused {
      background-color: ${getThemePropSelector('buttonSecondary')};
    }
    .sc-select__value-container {
      overflow: visible;
    }

    &.sc-select__control--menu-is-open {
      .sc-select__indicator {
        transform: rotate(180deg);
      }
    }
  }
`;
export const AllStatusIcon = () => {
    const theme = useTheme();
    return (_jsxs("svg", { viewBox: "0 0 150 100", xmlns: "http://www.w3.org/2000/svg", height: "16px", children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: theme.statusHealthy }), _jsx("circle", { cx: "75", cy: "50", r: "50", fill: theme.statusWarning }), _jsx("circle", { cx: "100", cy: "50", r: "50", fill: theme.statusCritical })] }));
};
export const defaultOptions = [
    {
        icon: _jsx(AllStatusIcon, {}),
        label: 'All Status',
        value: 'all',
    },
    {
        icon: _jsx(Icon, { name: "Check-circle", color: "statusHealthy", size: "lg" }),
        label: 'Healthy',
        value: 'healthy',
    },
    {
        icon: _jsx(Icon, { name: "Exclamation-circle", color: "statusWarning", size: "lg" }),
        label: 'Warning',
        value: 'warning',
    },
    {
        icon: _jsx(Icon, { name: "Times-circle", color: "statusCritical", size: "lg" }),
        label: 'Critical',
        value: 'critical',
    },
    {
        icon: _jsx(Icon, { name: "Info", color: "infoPrimary", size: "lg" }),
        label: 'Unknown',
        value: 'unknown',
    },
];
export const optionsDefaultConfiguration = {
    all: defaultOptions[0],
    healthy: defaultOptions[1],
    warning: defaultOptions[2],
    critical: defaultOptions[3],
    unknown: defaultOptions[4],
};
function HealthSelectorv2(props) {
    const { options = defaultOptions, value, ...selectRest } = props;
    let selectValue = value !== null && value !== void 0 ? value : options[0].value;
    return (_jsx(SelectStyle, { ...selectRest, value: selectValue, children: options.map((option, index) => {
            const { ...optionRest } = option;
            return (_jsx(Select.Option, { ...optionRest, children: option.label }, index));
        }) }));
}
export const HealthSelector = HealthSelectorv2;
