import { ControlCamera } from "@mui/icons-material";
import { Stack } from "@mui/material";
import React from "react";
import { ConditionGroup } from "../components/form/conditionGroup";
import { TextInput } from "../components/form/input";
import { NumberedSection } from "../components/form/numberedSection";
import { SelectInput } from "../components/form/select";
import {
  image,
  layout,
  layoutWithOptions,
  origin,
  originWithOptions,
  position,
  positionSelector,
  positionWithOptions,
  pushDown,
  type,
} from "../data/pfa-fields";

interface PositionSectionProps {
  formValues: { [key: string]: string };
  isFieldSet: (id: string) => boolean;
  handleChange: (id: string, value: string) => void;
  formFieldVisibility: { [key: string]: boolean };
  spacing: number;
}

export const PositionSection: React.FC<PositionSectionProps> = ({
  formValues,
  handleChange,
  isFieldSet,
  formFieldVisibility,
  spacing,
}) => {
  return (
    <NumberedSection
      inputSpaceVertical={spacing}
      icon={<ControlCamera />}
      headline={"Where and how would you like your widget to appear?"}
    >
      <SelectInput
        field={layoutWithOptions(formValues[type.id])}
        visible={isFieldSet(type.id)}
        formValues={formValues}
        handleChange={handleChange}
      />

      {isFieldSet(layout.id) && (
        <Stack spacing={spacing} direction={"row"}>
          <ConditionGroup spacing={spacing} label={"Design Options"}>
            <TextInput
              field={image}
              visible={formFieldVisibility[image.id] || !image.hidden}
              formValues={formValues}
              handleChange={handleChange}
            />
          </ConditionGroup>
          <ConditionGroup spacing={spacing} label={"Positioning"}>
            <SelectInput
              field={positionWithOptions(formValues[layout.id])}
              visible={formFieldVisibility[position.id] || !position.hidden}
              formValues={formValues}
              handleChange={handleChange}
            />

            <SelectInput
              field={originWithOptions(formValues[layout.id])}
              visible={formFieldVisibility[origin.id] || !origin.hidden}
              formValues={formValues}
              handleChange={handleChange}
            />

            <TextInput
              field={pushDown}
              visible={formFieldVisibility[pushDown.id] || !pushDown.hidden}
              formValues={formValues}
              handleChange={handleChange}
            />

            <TextInput
              field={positionSelector}
              visible={
                formFieldVisibility[positionSelector.id] ||
                !positionSelector.hidden
              }
              formValues={formValues}
              handleChange={handleChange}
            />
          </ConditionGroup>
        </Stack>
      )}
    </NumberedSection>
  );
};