<div id='root'></div>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}

.sidebar {
  background-color: #dddddd;
  position: fixed;
  top: 0;
  right: 0px;
  transition: right 0.5s;
  width: 40%;
  height: 100vh;
  padding: 0.5rem;
  
  h1 {
    text-transform: capitalize;
  }
  
  &.hidden {
    right: -100%;
    transition: right 0.7s ease;
  }
}

const { Fragment, useState, useRef } = React;

const TableCell = ({ colors, updateSidebar }) => (
  <td>
    <button
      onClick={() => updateSidebar(colors)}
    >
      { colors.output }
    </button>
  </td>
)

const Table = ({ updateSidebar }) => (
  <table>
    <tr>
      <td></td>
      <th>Red</th>
      <th>Blue</th>
    </tr>
    <tr>
      <th>Blue</th>
      <TableCell
        colors={{
          input1: "blue",
          input2: "red",
          output: "purple"
        }}
        updateSidebar={updateSidebar}
      />
      <TableCell
        colors={{
          input1: "blue",
          input2: "blue",
          output: "blue"
        }}
        updateSidebar={updateSidebar}
      />
    </tr>
    <tr>
      <th>Yellow</th>
      <TableCell
        colors={{
          input1: "red",
          input2: "yellow",
          output: "orange"
        }}
        updateSidebar={updateSidebar}
      />
      <TableCell
        colors={{
          input1: "blue",
          input2: "yellow",
          output: "green"
        }}
        updateSidebar={updateSidebar}
      />
    </tr>
  </table>
)

const Sidebar = ({ colors, hideSidebar, isHidden, sidebarRef }) => {
  const sidebarClasses = [
      "sidebar",
      isHidden ? "hidden" : null,
  ].join(' ');
  
  return (
    <aside className={sidebarClasses}>
      <h1
        ref={sidebarRef}
        tabIndex={-1}
      >
        {colors && colors.output}
      </h1>
      <button
        onClick={hideSidebar}
        >
        Close sidebar
      </button>
      <p>
        Mixing {colors && colors.input1} and {colors && colors.input2} makes {colors && colors.output}!
      </p>
    </aside>
  )
}

const App = () => {
  const [showSidebar, setShowSidebar] = useState(false);
  const [activeCell, setActiveCell] = useState(null);
  const sidebarRef = useRef(null);
  
  const updateSidebar = (colors) => {
    setActiveCell(colors);
    setShowSidebar(true);
    sidebarRef.current.focus();
  };

  const hideSidebar = () => {
    setShowSidebar(false);
  };
  
  return (
    <Fragment>
      <Table
        updateSidebar={updateSidebar}
      />
      <Sidebar
        colors={activeCell}
        hideSidebar={hideSidebar}
        isHidden={!showSidebar}
        sidebarRef={sidebarRef}
      /> 
    </Fragment>
  )
};

ReactDOM.render(<App />, document.getElementById('root'));