import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { FormTypes } from "../../../types/types";

const Output = () => {
  const handleSubmit = (values: FormTypes) => {
    console.log(values);
  };

  const inititalValues: FormTypes = {
    format: "JSON",
    enabled: true,
    backOfficeURL: "",
    username: "",
    password: "",
    connectTimeoutSeconds: Number(5),
    readTimeoutSeconds: Number(15),
    overviewQuality: "HIGH",
    cropSizeFactor: "3/4",

    // Bof2 -optional constants
    FFID: "",
    SCID: "",
    timestampSource: "UTC",
    GPSFormat: "Minutes",

    //BOF2 - optional Lane IDs
    laneId: "",
    LID1: "",
    LID2: "",
  };

  return (
    <Formik initialValues={inititalValues} onSubmit={handleSubmit}>
      <Form className="grid grid-cols-1 md:grid-cols-2">
        <BearerTypeCard />
        <ChannelCard />
      </Form>
    </Formik>
  );
};

export default Output;