import React, {useRef} from "react";
import styled from "styled-components";

const SearchButtonWrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const SearchInput = styled.input`
  width: 80%;
`;

const ApplyButton = styled.div`
  width: 17%;
  background-color: #e7e7e7;
  border-radius: 4px;
  color: #565656;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
  background-color: #565656;
  color: white;
  cursor: pointer;
`;



const SearchButton = (props) => {
  const {setKbId} = props;
  const inputEl = useRef(null);

  const searchKickboard = (e) => {
    const searchText = e.target.value;
    fetch(`http://1.201.143.67:5901/kickboard/${searchText}`)
      .then(r => r.json())
      .then(d => {
        if(d.success && d.data.length) setKbId();
        else window.alert('해당 번호의 킥보드가 존재하지 않습니다!')
      })
      .catch(err => console.log(err));
  };

  return (
    <SearchButtonWrapper>
      <SearchInput ref={inputEl} type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
      <ApplyButton onClick={(e) => searchKickboard(e)}><span>검색</span></ApplyButton>
    </SearchButtonWrapper>
  );
};

export default SearchButton;