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

import { TrashIcon } from "@/assets/icons";
import FormFooter from "@/components/ui/FormFooter";
import { FormErrorMessages } from "@/constants/Texts";
import { ChartPreview } from "./ChartPreview";
import useChartStepPresenter from "./useChartStepPresenter";

const ChartStep = () => {
  const {
    errors,
    handleSubmit,
    onSubmit,
    register,
    fields,
    append,
    remove,
    watch,
  } = useChartStepPresenter();

  const chartTitle = watch("chart_title");
  const chartPoints = watch("chart_points");

  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("chart_title", {
              required: { message: FormErrorMessages.required, value: true },
            })}
            label="Chart Title"
            name="chart_title"
            required
            type="text"
            placeholder="Enter Chart Title"
          />
          {errors.chart_title && (
            <p className="mt-1 text-sm text-red-500">
              {errors.chart_title.message}
            </p>
          )}
          <InputGroup
            {...register("lost_amount", {
              required: { message: FormErrorMessages.required, value: true },
              valueAsNumber: true,
            })}
            label="Lost Amount"
            name="lost_amount"
            required
            type="number"
            placeholder="Enter Lost Amount"
          />
          {errors.lost_amount && (
            <p className="mt-1 text-sm text-red-500">
              {errors.lost_amount.message}
            </p>
          )}
        </ShowcaseSection>
        <ShowcaseSection title="Chart Preview">
          <ChartPreview
            series={chartPoints.filter((p) => p.x && p.y)}
            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(`chart_points.${index}.x`, {
                  required: {
                    message: FormErrorMessages.required,
                    value: true,
                  },
                })}
                label="X-axis"
                name={`chart_points.${index}.x`}
                required
                type="text"
                placeholder="Enter X-axis value"
              />
              <InputGroup
                {...register(`chart_points.${index}.y`, {
                  required: {
                    message: FormErrorMessages.required,
                    value: true,
                  },
                  valueAsNumber: true,
                })}
                label="Y-axis"
                name={`chart_points.${index}.y`}
                required
                type="number"
                placeholder="Enter Y-axis 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({ x: "", y: 0 })}
          >
            Add point
          </button>
        </ShowcaseSection>
      </div>
      <div className="flex flex-col gap-9"></div>
    </form>
  );
};

export default ChartStep;
