import { Table,  Dropdown } from "react-bootstrap";

interface DatasetRow {
  id: string;
  kind: string;
  showOptions: boolean;
  numRows: number;
  Selected: boolean;
}

interface DatasetsProps {
  rows: DatasetRow[];
  setRows: React.Dispatch<React.SetStateAction<DatasetRow[]>>;
  setRemove: (id: string) => void;
  onRemove: () => void;
  setSelectedId: (id: string) => void;
}

const Datasets: React.FC<DatasetsProps> = ({ rows, setRows, setRemove, onRemove, setSelectedId }) => {
	const selectDataset = async (id: string) => {
		setRows((prevRows) =>
			prevRows.map((row) =>
				row.id === id
					? { ...row, Selected: !row.Selected }
					: { ...row, Selected: false }
			)
		);
		setSelectedId(id);
		setRemove(id);
	};

	const SelectedRowStyle = localStorage.getItem("theme") === "dark"
		? { backgroundColor: "#008800", color: "#fff" }
		: { backgroundColor: "#00dd00", color: "#000" };

	return (
		<>
     <h2 className="fw-bold mb-3 text-center">Datasets</h2>
      {/* Fix resposiveness */}
      <div className="p-0" style={{ width: "100%", maxHeight: "455px", overflowY: "auto" }}>
        <Table striped bordered hover responsive className="text-center">
          <thead>
            <tr>
              <th style={{ width: "50%" }}>Id</th>
              <th style={{ width: "20%" }}>Kind</th>
              <th style={{ width: "15%" }}># Rows</th>
              <th style={{ width: "15%" }}>Options</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.id} onClick={() => selectDataset(row.id)}>
                <td style={row.Selected ? SelectedRowStyle : {}}>{row.id}</td>
                <td style={row.Selected ? SelectedRowStyle : {}}>{row.kind}</td>
                <td style={row.Selected ? SelectedRowStyle : {}}>{row.numRows}</td>
                {/* Fix resposiveness */}
                <td className="position-relative" style={row.Selected ? SelectedRowStyle : { minWidth: "150px" } }>
                  <Dropdown>
                    <Dropdown.Toggle variant="secondary" className="w-100">Options</Dropdown.Toggle>
                    <Dropdown.Menu className="w-100 text-center">
                      <Dropdown.Item 
                        onClick={onRemove} 
                        className="text-danger"
                        style={{ transition: "background-color 0.2s", fontWeight: "bold" }}
                        onMouseEnter={(e) => (e.target as HTMLElement).style.backgroundColor = "#ffcccc"} 
                        onMouseLeave={(e) => (e.target as HTMLElement).style.backgroundColor = ""}>
                        Remove Dataset
                      </Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
	  </>
	);
};

export default Datasets;