import React, { useState, useContext } from 'react';
import FocusVisibleContext from './focusVisibleContext';

const useFocusVisible = props => {
  let {
    disabled,
    onFocus,
    onBlur
  } = props;
  let [focusedState, setFocused] = useState(false);
  let {
    hadKeyboardEvent,
    isInitialized
  } = useContext(FocusVisibleContext);

  if (disabled && focusedState) {
    setFocused(false);
  }

  if (isInitialized) {
    focusedState = hadKeyboardEvent && focusedState;
  } // else {
  //     focusedState = focusedState;
  // }


  return {
    focusVisible: focusedState,
    focusProps: {
      onBlur: e => {
        if (onBlur) {
          onBlur(e);
        }

        setFocused(false);
      },
      onFocus: e => {
        if (onFocus) {
          onFocus(e);
        }

        setFocused(true);
      }
    }
  };
};

export default useFocusVisible; // function Button(props) {
//   const { focusVisible, focusProps } = useFocusVisible();
//   return (
//     <div>
//         <button
//         style={{ outline: focusVisible ? "2px solid black" : "none" }}
//         {...focusProps}
//         >
//         {props.children} {focusVisible ? "yes" : "no"}
//         </button>
//         <span> { focusVisible ? "Click" : "Not-Click-Available" } </span>
//     </div>
//   )
// }
// function App() {
//     return (
//       <AccessibilityControl>
//         <Button />
//         <Input />
//         <Select />
//       </AccessibilityControl>
//     );
// }
// <Select>
//     <Option>Test1</Option>
//     <Option>Test2</Option>
//     <Option>Test3</Option>
//     <Option>Test4</Option>
// </Select>