import TextField from "@mui/material/TextField";
import {
  refreshcalendarExitPriceChartData,
  refreshSimilarCalendarPriceChartData,
} from "./actions";
import { daysBetweenFrontAndBackExpiration } from "./state";
import { EditableValue } from "./EditableValue";

const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
  if (
    daysBetweenFrontAndBackExpiration.value !== Number.parseInt(e.target.value)
  ) {
    daysBetweenFrontAndBackExpiration.value = Number.parseInt(e.target.value);
    refreshSimilarCalendarPriceChartData();
    refreshcalendarExitPriceChartData();
  }
};

function DaysBetweenFrontAndBackExpirationChooser() {
  return (
    <TextField
      fullWidth
      label="Front-to-Back-Month Days to Expiration Difference"
      type="number"
      value={daysBetweenFrontAndBackExpiration.value}
      onChange={handleDaysBetweenFrontAndBackExpirationChange}
      InputProps={{ endAdornment: "Days Difference" }}
    />
  );
}

export function EditableDaysBetweenFrontAndBackExpiration() {
  return (
    <EditableValue text={daysBetweenFrontAndBackExpiration.value}>
      <DaysBetweenFrontAndBackExpirationChooser />
    </EditableValue>
  );
}