import styled from "@emotion/styled";
import React, { useRef, useState } from "react";
import { LIGHT_PRIMARY_TWO, LIGHT_TERTIARY_ONE } from "../../../shared/colors";
import { PlatformProps } from "../../../shared/types";
import withPlatform from "../../platform/withPlatform";
import Input from "./InputWithShortcuts";

type Props = {
  tagComponent: (thing: any) => any;
  onRemoveTag: (tag: any) => any;
  onAddTag: (tag: any) => any;
  suggestions: any[];
  tags: any[];
} & PlatformProps;

function TagInput(props: Props) {
  const inputElement = useRef(null);
  const [search, setSearch] = useState<string>("");
  return (
    <Container>
      <SelectionOptions>
        {}
        <StyledInput
          shortcuts={[]}
          value={search}
          ref={inputElement}
          onChange={(e) => setSearch(e.target.value)}
        ></StyledInput>
      </SelectionOptions>
      <Selections></Selections>
    </Container>
  );
}

export default withPlatform(TagInput);

const SelectionOptions = styled.div`
  display: flex;
  align-items: center;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  background-color: ${LIGHT_PRIMARY_TWO};
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 #000000;
  display: flex;
  padding: 5px;
`;

const ProfilePicture = styled.div`
  height: 20px;
  width: 20px;
  background-color: ${LIGHT_TERTIARY_ONE};
  border-radius: 10px;
`;

const StyledInput = styled(Input)`
  -webkit-appearance: none;
  border: none;
  background-image: none;
  background-color: ${LIGHT_PRIMARY_TWO};
  margin-left: 5px;
  width: 200px;
`;

const Selections = styled.div`
  display: flex;
  flex-direction: column;
  background-color: ${LIGHT_PRIMARY_TWO};
`;

// class InputTag extends React.Component {
//   constructor() {
//     super();

//     this.state = {
//       tags: ["Tags", "Input"]
//     };
//   }

//   removeTag = i => {
//     const newTags = [...this.state.tags];
//     newTags.splice(i, 1);
//     this.setState({ tags: newTags });
//   };

//   inputKeyDown = e => {
//     const val = e.target.value;
//     if (e.key === "Enter" && val) {
//       if (
//         this.state.tags.find(tag => tag.toLowerCase() === val.toLowerCase())
//       ) {
//         return;
//       }
//       this.setState({ tags: [...this.state.tags, val] });
//       this.tagInput.value = null;
//     } else if (e.key === "Backspace" && !val) {
//       this.removeTag(this.state.tags.length - 1);
//     }
//   };

//   render() {
//     const { tags } = this.state;

//     return (
//       <div className="input-tag">
//         <ul className="input-tag__tags">
//           {tags.map((tag, i) => (
//             <li key={tag}>
//               {tag}
//               <button
//                 type="button"
//                 onClick={() => {
//                   this.removeTag(i);
//                 }}
//               >
//                 +
//               </button>
//             </li>
//           ))}
//           <li className="input-tag__tags__input">
//             <input
//               type="text"
//               onKeyDown={this.inputKeyDown}
//               ref={c => {
//                 this.tagInput = c;
//               }}
//             />
//           </li>
//         </ul>
//       </div>
//     );
//   }
// }