import { LinkControlProps } from "./interface";

const controlStyles = {
  fontSize: 10,
  display: "flex",
  justifyContent: "flex-start",
};

export default function LinkControls({
  layout,
  orientation,
  linkType,
  setOrientation,
  setLinkType,
}: LinkControlProps) {
  return (
    <div style={controlStyles}>
      <label style={{ fontSize: "10px" }}>orientation:</label>&nbsp;
      <select
        style={{ padding: "5px", borderRadius: "10px", marginBottom: "10px" }}
        onClick={(e) => e.stopPropagation()}
        onChange={(e) => setOrientation(e.target.value)}
        value={orientation}
        disabled={layout === "polar"}
      >
        <option value="vertical">vertical</option>
        <option value="horizontal">horizontal</option>
      </select>
      <br />
      <label style={{ fontSize: "10px" }}>link:</label>&nbsp;
      <select
        style={{ padding: "5px", borderRadius: "10px", marginBottom: "10px" }}
        onClick={(e) => e.stopPropagation()}
        onChange={(e) => setLinkType(e.target.value)}
        value={linkType}
      >
        <option value="diagonal">diagonal</option>
        <option value="step">step</option>
        <option value="curve">curve</option>
        <option value="line">line</option>
      </select>
    </div>
  );
}