import { Field, useFormikContext } from "formik";
import FormGroup from "../components/FormGroup";
import FormToggle from "../components/FormToggle";

const SightingDataFields = () => {
  useFormikContext();

  return (
    <div className="flex flex-col space-y-2">
      <FormGroup>
        <label htmlFor="overviewQuality">Overview Quality</label>
        <Field
          name="overviewQuality"
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
        >
          <option value="HIGH">High</option>
          <option value="MEDIUM">Medium</option>
          <option value="LOW">Low</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="overviewImageScaleFactor">
          Overview Image Scale Factor
        </label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="overviewImageScaleFactor"
        >
          <option value="HIGH">Full</option>
          <option value="MEDIUM">3/4</option>
          <option value="LOW">2/4</option>
          <option value="LOW">1/4</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="overviewType">Overview Type</label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="overviewType"
        >
          <option value="PlainOverview">Plain Overview</option>
          <option value="IncludePlatePatches">Include Plate Patches</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="invertMotion">Invert Motion</label>
        <FormToggle name="invertMotion" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="maxPlateValueLength">Max Plate Value Length</label>
        <Field
          name="maxPlateValueLength"
          type={"number"}
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="vrmToTransit">VRM To Transit</label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="vrmToTransit"
        >
          <option value="PlainOverview">plain VRM ASCII (default)</option>
          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="staticReadAction">Static Read Action</label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="staticReadAction"
        >
          <option value="UseLaneDirection">Use Lane Direction</option>
          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="noRegionAction">No Region Action</label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="noRegionAction"
        >
          <option value="UseLaneDirection">Send</option>
          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
        </Field>
      </FormGroup>
      <FormGroup>
        <label htmlFor="countryCodeType">Country Code Type</label>
        <Field
          as="select"
          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
          name="countryCodeType"
        >
          <option value="IBAN 2 Character code (default)">
            IBAN 2 Character code (default)
          </option>
          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
        </Field>
      </FormGroup>

      <FormGroup>
        <label htmlFor="overviewQualityOverride">
          Overview Quality Override
        </label>
        <Field
          name="maxPlateValueLength"
          type={"number"}
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="sightingDataEnabled">Sighting Data Enabled</label>
        <FormToggle name="sightingDataEnabled" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="sighthingDataVerbose">Sighting Data Verbose</label>
        <FormToggle name="sighthingDataVerbose" />
      </FormGroup>
    </div>
  );
};

export default SightingDataFields;