"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";

import { TrashIcon } from "@/assets/icons";
import { FormErrorMessages } from "@/constants/Texts";
import { forwardRef } from "react";
import { ChartPreview } from "./ChartPreview";
import useChartStepPresenter from "./useChartStepPresenter";

interface ChartStepProps {
  initialData?: any;
  onValidityChange?: (valid: boolean) => void;
}

const ChartStep = forwardRef<unknown, ChartStepProps>(
  ({ initialData, onValidityChange }, ref) => {
    const {
      errors,
      handleSubmit,
      onSubmit,
      register,
      fields,
      append,
      remove,
      watch,
    } = useChartStepPresenter(initialData, ref, onValidityChange);

    const chartTitle = watch("title");
    const chartData = watch("data");

    return (
      <form
        className="items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="flex flex-col gap-9">
          <ShowcaseSection
            title="Chart Information"
            className="flex flex-col gap-5"
          >
            <InputGroup
              {...register("title", {
                required: { message: FormErrorMessages.required, value: true },
              })}
              label="Chart Title"
              name="title"
              required
              type="text"
              placeholder="Enter Chart Title"
            />
            {errors.title && (
              <p className="mt-1 text-sm text-red-500">
                {errors.title.message}
              </p>
            )}
            <InputGroup
              {...register("missed_amount", {
                required: { message: FormErrorMessages.required, value: true },
              })}
              label="Missed Amount"
              name="missed_amount"
              required
              type="text"
              placeholder="Enter Missed Amount"
            />
            {errors.missed_amount && (
              <p className="mt-1 text-sm text-red-500">
                {errors.missed_amount.message}
              </p>
            )}
          </ShowcaseSection>
          <ShowcaseSection title="Chart Preview">
            <ChartPreview
              series={
                chartData
                  ?.filter((p) => p.key && p.value)
                  .map((p) => ({ x: p.key, y: p.value })) || []
              }
              title={chartTitle}
            />
          </ShowcaseSection>
          <ShowcaseSection title="Chart Points" className="flex flex-col gap-5">
            {fields.map((field, index) => (
              <div key={field.id} className="flex items-center gap-4">
                <InputGroup
                  {...register(`data.${index}.key`, {
                    required: {
                      message: FormErrorMessages.required,
                      value: true,
                    },
                  })}
                  label="Key"
                  name={`data.${index}.key`}
                  required
                  type="text"
                  placeholder="Enter key"
                />
                <InputGroup
                  {...register(`data.${index}.value`, {
                    required: {
                      message: FormErrorMessages.required,
                      value: true,
                    },
                    valueAsNumber: true,
                  })}
                  label="Value"
                  name={`data.${index}.value`}
                  required
                  type="number"
                  placeholder="Enter value"
                />
                <button
                  type="button"
                  onClick={() => remove(index)}
                  className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
                >
                  <TrashIcon />
                </button>
              </div>
            ))}
            <button
              type="button"
              className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
              onClick={() => append({ key: "", value: 0 })}
            >
              Add point
            </button>
          </ShowcaseSection>
        </div>
        <div className="flex flex-col gap-9"></div>
      </form>
    );
  },
);

ChartStep.displayName = "ChartStep";

export default ChartStep;
