import React, { useState } from 'react';
import classNames from 'classnames';
import './Search.scss';
import Icon from '../Icon';
import { colors } from '../../colors/colorConstants';
import Input from '../Input';
export interface SearchProps {
  /**
   * Placeholder for the input field
   */
  placeholder?: string;
  /**
   * Callback function to be called when the search button is clicked or enter key is pressed
   */
  onSearch: (query: string) => void;
  /**
   * Additional styles for the button
   */
  className?: string;
  /**
   * Pass true for transparentBackground button
   */
  style?: React.CSSProperties;
  /**
   * If true, the search input field will be disabled
   */
  disabled?: boolean;
  height: string;
  width: string;
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const Search = ({
  placeholder = 'Search',
  onSearch,
  className = '',
  style = {},
  disabled = false,
  height = '100%',
  width = '100%',
  value,
  onChange,
}: SearchProps) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      onSearch(value);
    }
  };
  const handleIconClick = () => {
    setIsExpanded(true);
  };
  const handleClear = () => {
    value = '';
    setIsExpanded(false);
  };
  return (
    <div className="storybook-search-wrapper">
      {isExpanded ? (
        <div
          className={classNames('search-form', className, {
            expanded: isExpanded,
          })}
          style={style}
        >
          <div className="storybook-search-container" style={{ height, width }}>
            <div
              className="storybook-search-icon"
              onClick={() => onSearch(value)}
            >
              <Icon
                color={colors.ff_up_arrow_color}
                name="search_icon"
                height={14}
                width={14}
              />
            </div>
            <span className="storybook-vertical-line"></span>
            <Input
              className="storybook-search-input"
              label=""
              name="input"
              placeholder={placeholder}
              type="text"
              value={value}
              onChange={onChange}
              onKeyDown={handleKeyDown}
              disabled={disabled}
              variant="primary"
            />
            <div className="storybook-clear-button" onClick={handleClear}>
              <Icon
                color={colors.ff_up_arrow_color}
                height={14}
                width={14}
                name="close_circle"
              />
            </div>
          </div>
        </div>
      ) : (
        <div className="storybook-expand-search-icon" onClick={handleIconClick}>
          <Icon
            color={colors.ff_up_arrow_color}
            name="search_icon"
            height={14}
            width={14}
          />
        </div>
      )}
    </div>
  );
};
export default Search;