/* eslint-disable react-hooks/exhaustive-deps */
import React, {useState, useEffect, useRef, useCallback} from "react";
import {Tag, Input} from 'antd';
import {  PlusCircleOutlined, CloseCircleOutlined   } from '@ant-design/icons';
import styled from "styled-components";
import {ChromeStorage} from '../../db/chromeSotrage';

const Tags = styled(Tag)`
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 25px;
    &:hover {
      cursor: pointer;
    }
`;

const NewTag = styled(Tag)`
    height: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    &:hover {
      cursor: pointer;
    }
`;

const CustomTag = ({deadlineTag, tagItem}) => {
  const  [tags, setTags] = useState(null);
  const  [inputVisible, setInputVisible] = useState(false);
  const  [inputValue, setInputValue] = useState('');
  const refInput = useRef(null);

  const handleClose = (indexTag) => {
    ChromeStorage.removeTag(deadlineTag.id,tagItem.index, indexTag).then(result => {
      updateCacheTag();
    });
  };

  const showInput =  useCallback(() => {
    setInputVisible(true);
    if(refInput.current != null) {
      refInput.current.focus();
    }
  },[refInput]);
  

  const handleInputChange = e => {
    setInputValue(e.target.value);
  };


  const updateStorageTag = (tag) => {;
    ChromeStorage.getDeadline(deadlineTag.id).then
        ( deadline => {
            if(deadline.tag) {
              // eslint-disable-next-line no-unused-expressions
              deadline.tag[tagItem.index].push(tag);
            } else {
              const newTags = Array.from(Array(deadlineTag.boxes.length), () => []);
              newTags[tagItem.index].push(tag);
              deadline.tag = newTags;
            }
            ChromeStorage.saveDeadline(deadline).then(result => {
              updateCacheTag();
            });
        });
  }

  const handleInputConfirm = () => {
    if (inputValue) {
      if (tags) {
        setTags([...tags, inputValue]);
      } else {
        setTags([inputValue]);
      }
      updateStorageTag(inputValue);
    }
    setInputVisible(false);
    setInputValue('');
  };

  const updateCacheTag = () => {
    ChromeStorage.getTag(tagItem.index, deadlineTag.id).then((tags) => {
      setTags(tags);
    });
  }

  useEffect(() => {
    setInputVisible(false);
   if (tagItem) {
      updateCacheTag();
   }
  },[tagItem, deadlineTag]);


    return (
           (tagItem != null ? tagItem.item.passed : false)  && (
              <>
              { (tags || [] ).map((item, index) => { return ( 
                      <> 
                          <Tags icon={<CloseCircleOutlined  />}
                              className="edit-tag"
                              key={index}
                              onClick={(e) => {handleClose(index)}}
                              >{item}
                          </Tags>
                      </>)})
              }
              {inputVisible && (
                  <Input
                    type="text"
                    size="small"
                    ref={refInput}
                    className="tag-input"
                    value={inputValue}
                    onChange={ (e)=>{ handleInputChange(e)}}
                    onPressEnter={ (e)=>{ handleInputConfirm(e)} }
                  />
              )}
              {!inputVisible && (
                  <NewTag className="site-tag-plus" onClick={()=>{showInput()}}>
                     <PlusCircleOutlined /> New Tag
                  </NewTag>
              )}
          </>        
          )
         
    );
};

export default CustomTag;