import "@fontsource/public-sans";

import { FormControl, FormLabel, Grid, Input } from "@mui/joy";
import { useState } from "react";
import type {
  Position,
  SelectedAsset,
  SetPositions,
} from "~/interfaces/simulator";

const inputLabelSx = { fontSize: { xs: "xs", md: "sm" } };

interface EditPositionFormProps {
  position: Position;
  positions: Position[];
  setPositions: SetPositions;
  selectedAsset: SelectedAsset;
}

export default function EditPositionForm({
  position,
  positions,
  setPositions,
  selectedAsset,
}: EditPositionFormProps) {
  const [qtdError, setQtdError] = useState(false);

  let updatePositionTimeoutId: number;

  const updatePositionWithDelay = (key: string, value: string) => {
    clearTimeout(updatePositionTimeoutId);

    updatePositionTimeoutId = window.setTimeout(() => {
      updatePosition(key, value);
    }, 2000);
  };

  const updatePosition = (key: string, value: string) => {
    if (key === "qtd" && value) {
      setQtdError(true);
      return;
    }
    const currPositionIdx = positions.findIndex(
      (thisPosition) => thisPosition.id === position.id
    );
    const currPosition = positions[currPositionIdx];
    if (currPosition !== undefined) {
      const updatedPosition = { ...currPosition, [key]: value };
      setQtdError(false);
      setPositions([
        ...positions.slice(0, currPositionIdx),
        updatedPosition,
        ...positions.slice(currPositionIdx + 1),
      ]);
    }
  };

  return (
    <Grid
      container
      spacing={1}
      direction='row'
      justifyContent='flex-start'
      alignItems='flex-start'
    >
      <Grid xs={5} md={4}>
        <FormControl>
          <FormLabel sx={inputLabelSx}>Valor</FormLabel>
          <Input
            sx={inputLabelSx}
            type='number'
            name='qtd'
            error={qtdError}
            defaultValue={position.qtd}
            onChange={(e) => {
              updatePositionWithDelay("qtd", e.target.value);
            }}
            startDecorator='R$'
            // startDecorator={{ real: 'R$', qtd: '' }[type]}
            // endDecorator={
            //   <React.Fragment>
            //     <Divider orientation="vertical" />
            //     <Select
            //       variant="plain"
            //       value={type}
            //       onChange={(_, value) => {
            //         setType(value!);
            //         updatePositionWithDelay("type", value);
            //       }}
            //       sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
            //     >
            //       <Option value="real">Valor</Option>
            //       {/* <Option value="qtd">Qtd.</Option> */}
            //     </Select>
            //   </React.Fragment>
            // }
            slotProps={{
              input: {
                min: 0,
              },
            }}
          />
        </FormControl>
      </Grid>
      <Grid xs={5} md={5}>
        <FormControl>
          <FormLabel sx={inputLabelSx}>Data</FormLabel>
          <Input
            sx={inputLabelSx}
            type='date'
            name='date'
            defaultValue={position.date}
            onChange={(e) => {
              updatePositionWithDelay("date", e.target.value);
            }}
            slotProps={{
              input: {
                min: selectedAsset.minDate,
                max: selectedAsset.maxDate,
              },
            }}
          />
        </FormControl>
      </Grid>
    </Grid>
  );
}