import { useFormikContext } from "formik";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
import { useGetBearerConfig } from "../hooks/useBearer";

const ChannelCard = () => {
  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
  const outputData = bearerQuery?.data;
  return (
    <Card className="p-4 h-150 md:h-full">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields
        errors={errors}
        touched={touched}
        values={values}
        outputData={outputData}
        onSetFieldValue={setFieldValue}
      />
      <button
        type="submit"
        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
      >
        {"Save Changes"}
      </button>
    </Card>
  );
};

export default ChannelCard;