import React from "react";
import { Input } from "@/components/ui/input";
import { path } from "ramda";
import { ForecastDatePicker } from "@/components/ui/DatePicker";

export const Options = function ({ state, updateState }) {
  const defaultDate = path(["options", "defaultDate"], state);

  return (
    <div
      className="flex flex-col p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5 w-full h-full"
      style={{ maxWidth: "810px", maxHeight: "470px" }}
    >
      <h1 className="text-lg font-medium mb-1">Options</h1>
      <label className="font-medium">
        Chart line width:
        <Input
          type="number"
          defaultValue="1"
          min="1"
          value={path(["options", "lineWidth"], state)}
          onChange={(e) =>
            updateState({ options: { lineWidth: e.target.value } })
          }
        />
      </label>
      <label>
        <ForecastDatePicker
          dateTime={defaultDate || null}
          onChange={(dateTime) => {
            updateState({ options: { defaultDate: dateTime } });
          }}
        />
      </label>
    </div>
  );
};