import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize, fontWeight } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { Icon } from '../icon/Icon.component';
import { Button } from './../button/Button.component';
import { Checkbox } from './../checkbox/Checkbox.component';
import { Select } from './../select/Select.component';
const MultiSelectContainer = styled.div `
  color: ${getThemePropSelector('textPrimary')};
`;
const MultiSelectTitle = styled.h3 `
  padding: ${spacing.r16} 0;
  margin: 0;
  font-weight: ${fontWeight.bold};
  font-size: ${fontSize.large};
`;
const MultiSelectItemContainer = styled.div `
  margin: ${spacing.r4} 0;
  padding: ${spacing.r8} 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gray;
  &:last-child {
    border: none;
  }
`;
const MultiSelectSearchContainer = styled.div `
  display: flex;
  align-items: center;
  .sc-select-container {
    width: 100%;
  }
  .sc-button {
    margin: 0 ${spacing.r8};
  }
`;
const MultiSelectItemLeft = styled.div `
  .sc-checkbox,
  .sc-button {
    margin: 0 ${spacing.r8};
  }
`;
const MultiSelectItemCenter = styled.div `
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
`;
const MultiSelectItemRight = styled.div `
  padding: 0 ${spacing.r16};
`;
const MultiSelectItemLabel = styled.span `
  font-size: ${fontSize.large};
`;
const MultiSelectItemDescription = styled.span ``;
function MultiSelectItem(props) {
    const { selected, label, description, onItemRemove, onSelect } = props;
    return (_jsxs(MultiSelectItemContainer, { className: "sc-multi-select-item", children: [_jsx(MultiSelectItemLeft, { className: "sc-multi-select-item-left", children: typeof selected === 'boolean' && onSelect && (_jsx(Checkbox, { checked: selected, onChange: (event) => onSelect(label, event) })) }), _jsxs(MultiSelectItemCenter, { className: "sc-multi-select-item-center", children: [_jsx(MultiSelectItemLabel, { className: "sc-multi-select-item-label", children: label }), description && (_jsx(MultiSelectItemDescription, { className: "sc-multi-select-item-description", children: description }))] }), _jsx(MultiSelectItemRight, { className: "sc-multi-select-item-right", children: onItemRemove && (_jsx(Button, { inverted: true, variant: "buttonDelete", onClick: (event) => onItemRemove(label, event), icon: _jsx(Icon, { name: "Delete" }) })) })] }));
}
function MultiSelectSearch(props) {
    const { selectedOption, onSelect, onAdd, ...rest } = props;
    return (_jsxs(MultiSelectSearchContainer, { className: "sc-multi-select-list-search", children: [_jsx(Select
            // @ts-ignore
            , { 
                // @ts-ignore
                onChange: onSelect, value: selectedOption, ...rest }), onAdd && _jsx(Button, { onClick: onAdd, icon: _jsx(Icon, { name: "Create-add" }) })] }));
}
function MultiSelectList({ title = '', items = [], search, onItemRemove, }) {
    return (_jsxs(MultiSelectContainer, { className: "sc-multi-select-list", children: [title && _jsx(MultiSelectTitle, { children: title }), search && _jsx(MultiSelectSearch, { ...search }), items.map((item, index) => (_jsx(MultiSelectItem, { onItemRemove: onItemRemove, ...item }, `sc-multi-select-item-${index}`)))] }));
}
export const MultiSelect = MultiSelectList;
