import {
  Field,
  FieldLabel,
  Help,
  Line,
  TextInput,
} from "@contentstack/venus-components";
import { ChangeEvent, useState } from "react";
import { ImageVaultDAMConfig } from "~/utils/imagevault";

import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";

export type ConfigFormProps = {
  values: Partial<ImageVaultDAMConfig>;
  setInstallationData: (data: IInstallationData) => void;
};

export default function ConfigForm({
  values,
  setInstallationData,
}: ConfigFormProps) {
  const [finalValues, setFinalValues] = useState(values);

  return (
    <div style={{ display: "grid", gap: "18px", margin: "18px" }}>
      <Field style={{}}>
        <FieldLabel version="v2" htmlFor="baseUrl">
          Base url for contentstack
        </FieldLabel>
        <Help text="Including the region. Used as publishing source on ImageVault" />
        <TextInput
          id="baseUrl"
          name="baseUrl"
          type="url"
          value={finalValues.baseUrl}
          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
            setFinalValues((prev) => ({
              ...prev,
              baseUrl: evt.target.value,
            }));

            setInstallationData({
              configuration: {
                ...finalValues,
                baseUrl: evt.target.value,
              },
              serverConfiguration: {},
            });
          }}
          required={true}
          willBlurOnEsc={true}
          placeholder="Base url for Contentstack....."
          version="v2"
          width="large"
        />
      </Field>

      <Line type="dashed" />

      <Field>
        <FieldLabel version="v2" htmlFor="formatId">
          Format Id for images
        </FieldLabel>
        <Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
        <TextInput
          id="formatId"
          name="formatId"
          type="number"
          value={finalValues?.formatId}
          required={true}
          willBlurOnEsc={true}
          placeholder="Id for selected format..."
          version="v2"
          width="large"
          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
            setFinalValues((prev) => ({
              ...prev,
              formatId: evt.target.value,
            }));

            setInstallationData({
              configuration: {
                ...finalValues,
                formatId: evt.target.value,
              },
              serverConfiguration: {},
            });
          }}
        />
      </Field>

      <Line type="dashed" />

      <Field>
        <FieldLabel version="v2" htmlFor="v">
          Url to ImageVault
        </FieldLabel>
        <TextInput
          id="imageVaultUrl"
          name="imageVaultUrl"
          type="url"
          value={finalValues.imageVaultUrl}
          required={true}
          willBlurOnEsc={true}
          placeholder="www..."
          version="v2"
          width="large"
          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
            setFinalValues((prev) => ({
              ...prev,
              imageVaultUrl: evt.target.value,
            }));

            setInstallationData({
              configuration: {
                ...finalValues,
                imageVaultUrl: evt.target.value,
              },
              serverConfiguration: {},
            });
          }}
        />
      </Field>
    </div>
  );
}