import React, { useMemo, useState, useRef, useContext } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
import MenuButton from '../../ui/buttons/MenuButton';
import useOnClickOutside from '../../helpers/useOnClickOutside';
import { WaxContext } from 'wax-prosemirror-core';

const Wrapper = styled.div`
  font-size: 0;
  position: relative;
  z-index: 2;
`;

const DropWrapper = styled.div`
  margin-top: ${grid(1)};
  position: absolute;
  background: white;
  top: 32px;
  width: max-content;
`;
const TextHighlightComponent = styled.div`
  display: flex;
  flex-direction: column;
  background:white
  border:1px solid gray
`;
const Highlighter = styled.div`
  min-width: 25px;
  height: 25px;
  margin:5px;
  display: inline-grid;
  cursor: pointer;
  border:1px solid gray
`;

const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
  const { icon, title, select } = item;
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();
  const {
    view: { main },
    activeViewId,
    activeView,
  } = useContext(WaxContext);

  useOnClickOutside(ref, () => setIsOpen(false));
  let clicks = [];
  let lastSaveColor;
  let isApplied=false;
  let timeout; 
  
  const highlightDropDownOptions = [
    { name: 'red', value: 'color:red' },
    { name: 'blue', value: 'color:blue' },
    { name: 'yellow', value: 'color:yellow' },
    { name: 'black', value: 'color:black' },
    { name: 'green', value: 'color:green' },
    { name: 'gray', value: 'color:gray' },
    { name: 'orange', value: 'color:orange' },
    { name: 'brown', value: 'color:brown' },
    { name: 'aquamarine', value: 'color:aquamarine' },
    { name: 'transparent', value: 'color:transparent' },
  ];

  const renderList = () => {
    const lists = [];

    Object.keys(highlightDropDownOptions).forEach(function (key) {
      lists.push(
        <Highlighter onMouseDown={e => handleMouseDown(e)}  key={uuidv4()} 
          title={highlightDropDownOptions[key].name} data-style={highlightDropDownOptions[key].value} style={{backgroundColor: highlightDropDownOptions[key].name}}
        >
        </Highlighter>
      );
    });
    return <div>{lists}</div>;
  };
  
  const handleMouseDown = e => {
    e.preventDefault();
    item.run(activeView.state,activeView.dispatch,e.target.getAttribute('style'));
    lastSaveColor=e.target.getAttribute('style')
    localStorage.setItem('lastColor',lastSaveColor)
    let btnBackground=e.target.title;
    localStorage.setItem('lastBgColor',btnBackground)
    console.log(btnBackground);
    setIsOpen(false);
  }
  const handleDblClk=()=>{
    console.log()
    item.run(state, dispatch, localStorage.getItem('lastColor')); 
   }

  const isDisabled = !select(state, activeViewId, activeView);

  const MenuButtonComponent = useMemo(
    () => (
      <Wrapper ref={ref} onDoubleClick={handleDblClk}>
        <div style={{backgroundColor:localStorage.getItem('lastBgColor')!=undefined?localStorage.getItem('lastBgColor'):''}}>
        <MenuButton
          active={isOpen}
          disabled={isDisabled} 
          iconName={icon}
          onMouseDown={() => {setIsOpen(!isOpen)}
          
          }
          title={title}
        />
        </div>
        {isOpen && (
          <DropWrapper>
            <TextHighlightComponent key={uuidv4()} item={item} view={dispatch, state}
              close={() => {
                setIsOpen(false);
              }}>{renderList()}</TextHighlightComponent>
          </DropWrapper>
        )}
      </Wrapper>
    ),
    [isOpen,isDisabled],
  );

  return MenuButtonComponent;
};

export default TextHighlightingTool;