//This one is the function that is receiving the data to know which one was the las unselected
const onDeselect = useCallback(room => {
         setRoom(room)
},[])

//Calling the  selectable component that is inside `Cards` that is inside `Tabs`!
                            <Tabs activeKey={activeKey} onChange={tabCallback}>
                                {currentTab && currentTab.distribution.map((q, i) => (
                                    <TabPane className="tabPanelFloor" key={i} tab={`PISO ${q.floor}`}>

                                        {q.rooms.map((room, index) => (
                                            <Card
                                                style={gridStyle}
                                                key={index}
                                                title={`Habitación ${room.number}`}
                                            >
                                                <div> 
//Calling the selectable
                                                    <Selectable floor={q.floor} beds={room.beds} room={room.number} onClick={onDeselect} onSelect={onSelect}/>
                                                </div>
                                            </Card>
                                        ))}
                                    </TabPane>
                                ))}
                            </Tabs>

//The selectable!
const Selectable = ({ onSelect, floor, beds, room, onClick }) => {
           return (
    <SelectableGroup
      scrollContainer="html"
      allowClickWithoutSelected={true}
      selectOnClick={true}


      resetOnStart={false}
      enableDeselect
      onSelectionFinish={onSelect}
    >

      <table key={room} border="1">
        <tbody>
          <List data={{ floor, beds: _.chunk(beds, 6), room }} onClick={onClick} />
        </tbody>
      </table>

    </SelectableGroup>
      );
    };

//The list!
const List = memo(({ data, onClick }) =>
  data.beds.map((q, i) =>
  (
    <tr key={i}>
      {q.map((k, j) => <Cells key={j} room={data.room} onClick={onClick} number={k} />)}
    </tr>
  )
 )
);

//The cell that contain the data and know if is selected or UNSELECTED!
const Cells = ({ selectableRef, isSelected, isSelecting, number, room, onClick}) => {
    return (
        <td
            ref={selectableRef}
            className={`${isSelected ? "selected" : ""} ${isSelecting ? "selecting" : ""}`}
            
        >
            <div style={
                {
                    color: isSelected || isSelecting ? "#eeeded" : "#000",
                    background: isSelected || isSelecting ? "#5c6e91" : "#fff",
                    padding: 2
                }
            }
          onClick={(!isSelected || !isSelecting) && (onClick(room))}
            >  
               
                <div><Icon component={BedSvg}/></div>
                <div>{number}</div>
            
            </div>
        </td>
    );
};