import { useProp, useState, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-edit-tag.js';
import './kun-icon-close.js';
import produce from 'immer';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-tag-input/kun-tag-input.tsx";




const KunTagInput = () => {
  const [tags, setTags] = useProp("tags");
  const [maxSize] = useProp("maxSize");
  const [currentTag, setCurrentTag] = useState("");

  const deleteTag = (tag) => {
    const s1 = produce(tags, (draft) => {
      const index = tags.findIndex((item) => item === tag);
      if (index > -1) {
        draft.splice(index, 1);
      }
    });
    setTags(s1);
  };

  const addTag = () => {
    if (currentTag !== "") {
      if (tags.indexOf(currentTag) < 0) {
        setTags((tags.concat(currentTag)));
      }
      setCurrentTag("");
    }
  };

  const changeInput = (event) => {
    const { value } = event.target;
    setCurrentTag(value);
  };
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}, mockStyle)
      , h('div', { className: "flex " , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}
        , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 45}}
          , 
                        tags.map((item) => (
                          h('kun-edit-tag', {
                            className: "mr-4",
                            content: item,
                            onDeleteTag: () => deleteTag(item), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
                          )
                        ))
                    
        )

        , 
                    (tags.length < maxSize) && (
                    h('div', { className: "inline-flex w-1/3 justify-end items-center"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 59}}
                      , h('input', {
                        type: "text",
                        className: "border-b-2  px-2 focus:shadow-outline focus:bg-blue-100 mr-3"     ,
                        value: currentTag,
                        oninput: changeInput, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 60}}
                      )
                      , h('button', { classNamee: "px-4 bg-gray-300 hover:bg-gray-400 text-gray-800"   , onclick: addTag, type: "button", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 66}}, "添加"

                      )
                    )
                    )
                
      )
    )
  );
};

KunTagInput.props = {
  max: {
    type: Number,
    value: 5,
  },
};

var kunTagInput = getComponentOrDefine("kun-tag-input", KunTagInput);

export default kunTagInput;
