import React from 'react';
import styled from 'styled-components';

export const Search = ({ onChange, text, className, placeholder }) => {
  return (
    <Inputwrapper className={className}>
      <svg>
        <use href="/images/icons.svg#search"></use>
      </svg>
      <input
        type="search"
        value={text}
        placeholder={placeholder}
        onChange={event => onChange(event.target.value)}
      />
      <button className="clear-btn">
        <svg>
          <use href="/images/icons.svg#close"></use>
        </svg>
      </button>
    </Inputwrapper>
  );
};

export const SearchInAgentGroup = ({
  onchange,
  value,
  className,
  placeholder,
}) => {
  return (
    <Inputwrapper className={className}>
      <svg>
        <use href="/images/icons.svg#search"></use>
      </svg>
      <input
        type="search"
        value={value}
        placeholder={placeholder}
        onChange={onchange}
      />
      <button className="clear-btn">
        <svg>
          <use href="/images/icons.svg#close"></use>
        </svg>
      </button>
    </Inputwrapper>
  );
};

/**
 * Custom search input
 * @param {*} param0
 */
export const CustomSearch = ({ onchange, className, placeholder }) => {
  return (
    <Inputwrapper className={className}>
      <svg>
        <use href="/images/icons.svg#search"></use>
      </svg>
      <input
        onChange={e => onchange(e.target.value)}
        type="search"
        placeholder={placeholder}
      />
      <button className="clear-btn">
        <svg>
          <use href="/images/icons.svg#close"></use>
        </svg>
      </button>
    </Inputwrapper>
  );
};

const Inputwrapper = styled.label`
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #c5c9da;
  border-radius: 100px;
  max-width: 360px;
  min-width: 360px;
  padding: 1rem 2rem;
  &:focus-within {
    background: #fff;
  }

  svg {
    width: 16px;
    height: 16px;
    color: #c5c9da;
  }
  .clear-btn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    right: 0rem;
    padding: 0.8rem 1rem;
    // opacity: 0;
  }
  input {
    width: calc(100% - 25px);
    font-size: 1.6rem;
    padding: 0.3rem 0;
    &::placeholder {
      font-size: 1.6rem;
      font-family: var(--co-body);
      color: #61677c;
    }
  }
  input:focus ~ .clear-btn {
    opacity: 1;
  }

  &.fb-search {
    max-width: 220px;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e8edff;
    padding: 0.5rem 1rem;
    input {
      font-size: 1.4rem;
    }
  }
`;
