import React, { useState } from 'react';
import styled from 'styled-components';

const TaggedInputsTeam = ({ type, placeholder, error, setUpdateList }) => {
  const [tags, setTags] = useState([]);
  const [tempTag, setTempTag] = useState('');
  // const [access, setAccess] = useState({});

  /**
   *@description Add the value to the list of tags
   * @param {*} value
   */
  const onAddtag = value => {
    const copyTags = [...tags];
    if (value.trim().length > 0) {
      copyTags.push(value);
    }
    setTags(copyTags);
    setUpdateList(copyTags);
  };

  /**
   * @descriptionUse index to track the value to be deleted
   * @param {*} index
   */
  const onDeleteTag = index => {
    const copyTags = [...tags];
    copyTags.splice(index, 1);
    setTags(copyTags);
  };

  // const onChangeAccess = value => {
  //   setAccess(value);
  //   onChangeRole(value);
  // };

  return (
    <Inputwrapper
      className={`input-wrapper tag-wrapper ${error ? 'input-error' : ''}`}
    >
      <TagInputWrapper className="tag-input active">
        {tags?.map((tag, i) => {
          return (
            <Tag key={i}>
              <span>{tag}</span>
              <svg style={{ cursor: 'pointer' }} onClick={() => onDeleteTag(i)}>
                <use href="/images/icons.svg#cancel"></use>
              </svg>
            </Tag>
          );
        })}

        <input
          value={tempTag}
          onChange={e => {
            if (e.target.value !== ',') {
              setTempTag(e.target.value);
            }
          }}
          onKeyDown={e => {
            if (e.key === ',' || e.key === 'Enter') {
              onAddtag(e.target.value);
              setTempTag('');
            }
          }}
          type={type}
          placeholder={placeholder}
          style={{ minWidth: '250px ' }}
        />
        {/* <div className="dropwrapper">
          <AccessMenu value={access.name} onchange={onChangeAccess} />
        </div> */}
      </TagInputWrapper>
      {error ? (
        <p className="error-message">Uh oh! There was an error!</p>
      ) : null}
    </Inputwrapper>
  );
};

export default TaggedInputsTeam;

const Inputwrapper = styled.div`
  position: relative;

  .error-message {
    font-size: 1.2rem;
    font-family: var(--ff-medium);
    color: var(--co-error);
    line-height: 1.1;
    margin-top: 1rem;
  }
  &.input-error {
    .label {
      color: var(--co-error);
      span {
        opacity: 1;
        transform: translateY(0);
      }
      &:before {
        background: var(--co-error);
        width: 100%;
      }
    }
    .input {
      border-color: var(--co-error);
    }
    .label:before {
      background: var(--co-error);
      width: 100%;
    }

    input:not(:placeholder-shown) ~ .label:before {
      background: var(--co-error);
      width: 100%;
    }
    .input:focus-within {
      .label {
        opacity: 1;
        border-bottom: none;
      }
      .label:before {
        background: var(--co-error);
        width: 100%;
      }
    }
  }
  &:not(:last-child):not(:only-child) {
    margin-bottom: 4rem;
  }
  &.tag-wrapper {
    margin-bottom: 1rem;
    &:not(:last-child):not(:only-child) {
      margin-bottom: 2rem;
    }
  }
`;

const TagInputWrapper = styled.div`
  position: relative;
  background: #f1f1f4;
  padding: 1rem 0.8rem;
  // padding-right: 119px;
  z-index: 1;
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-grow: 1;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 0;
    height: 2px;
    transition: width 1s ease;
    z-index: 2;
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #c5c9da;
  }
  &:focus-within {
    &:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  &.active {
    &:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  input {
    margin-left: 1rem;
  }
  .dropwrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }
`;
const Tag = styled.div`
  display: flex;
  align-items: center;
  background: #c5c9da;
  border-radius: 3px;
  min-width: 119px;
  padding: 1rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  span {
    color: var(--co-head);
    font-family: var(--ff-sbold);
    font-weight: 600;
    margin-right: 1rem;
    font-size: 1.2rem;
  }
  svg {
    width: 12px;
    height: 12px;
    color: #61677c;
  }
`;
