components/editor-badge/comps/header/form/main.tsx

import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";

import { FontFamilySelector } from "@/components/font-family";
import { FontWeight } from "@/components/font-weight";

import { Switch } from "@/components/switch";
import { BadgeType } from "@/types/badge";
import { ColorPicker } from "components/color-picker";
import { Label } from "@/components/label";
import { Input } from "@/components/input";
import classNames from "classnames";
import { SelectShapes } from "../../select-shapes";
import { IconPicker } from "@/components/icon-picker";

export const MainForm = ({
  badge,
  setBadge,
}: {
  badge: BadgeType;
  setBadge: (b: BadgeType) => void;
}) => {
  const intl = useIntl();

  return (
    <div className="grid grid-cols-1 gap-4 px-6 pb-6 pt-5">
      <SelectShapes badge={badge} onChange={setBadge} />
      <div>
        <Label className="mb-2">Text</Label>
        <Input
          value={badge?.text?.value}
          placeholder="Badge text"
          className="bg-dark-600 rounded px-3 py-3 text-sm text-white placeholder-dark-200 w-full"
          onChange={(value) => {
            setBadge({
              ...badge,
              text: { ...badge.text, value: value as string },
            });
          }}
        />
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div className="lg:col-span-2">
          <Label>Colors</Label>
        </div>
        <div>
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Background" />
          </p>
          <ColorPicker
            data={badge}
            full
            value={badge?.stringColor ?? badge?.colour}
            gradients={badge?.type === "circle"}
            onChange={(c: any, datas) => {
              let newBadge = { ...badge, stringColor: c };
              if (c.includes("gradient")) {
                const { colors, degrees } = datas;
                const gradientType = c?.startsWith("linear")
                  ? "linearGradient"
                  : "radialGradient";
                const anglePI =
                  Number(degrees ? degrees?.replace("deg", "") : 90) *
                  (Math.PI / 180);
                const angleCoords = {
                  x1: Math.round(50 + Math.sin(anglePI) * 50) + "%",
                  y1: Math.round(50 + Math.cos(anglePI) * 50) + "%",
                  x2: Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + "%",
                  y2: Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + "%",
                };

                newBadge["gradient"] = {
                  ...newBadge.gradient,
                  enabled: true,
                  colours: colors,
                  angle: angleCoords,
                  type: gradientType,
                };
              } else {
                newBadge = {
                  ...newBadge,
                  colour: c,
                  gradient: {
                    ...newBadge?.gradient,
                    enabled: false,
                  },
                };
              }
              setBadge(newBadge);
            }}
          />
        </div>
        <div>
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Text" />
          </p>
          <ColorPicker
            data={badge?.text}
            value={badge?.text?.stringColor ?? badge?.text?.colour}
            full
            onChange={(c: any, datas) => {
              let newBadge = {
                ...badge,
                text: { ...badge.text, stringColor: c },
              };
              if (c.includes("gradient")) {
                const { colors, degrees } = datas;
                const gradientType = c?.startsWith("linear")
                  ? "linearGradient"
                  : "radialGradient";
                const anglePI =
                  Number(degrees ? degrees?.replace("deg", "") : 90) *
                  (Math.PI / 180);
                const angleCoords = {
                  x1: Math.round(50 + Math.sin(anglePI) * 50) + "%",
                  y1: Math.round(50 + Math.cos(anglePI) * 50) + "%",
                  x2: Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + "%",
                  y2: Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + "%",
                };
                newBadge["text"]["gradient"] = {
                  ...newBadge?.text?.gradient,
                  enabled: true,
                  colours: colors,
                  angle: angleCoords,
                  type: gradientType,
                };
              } else {
                newBadge = {
                  ...newBadge,
                  text: {
                    ...newBadge?.text,
                    colour: c,
                    gradient: {
                      ...newBadge?.text?.gradient,
                      enabled: false,
                    },
                  },
                };
              }
              setBadge(newBadge);
            }}
          />
        </div>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
        <div className="lg:col-span-4 flex items-center justify-start gap-3">
          <Label>Icon</Label>
          <Switch
            value={badge?.icon?.enabled}
            onChange={(enabled: boolean) =>
              setBadge({
                ...badge,
                icon: {
                  ...badge.icon,
                  position: badge?.icon?.position ?? "left",
                  enabled,
                },
              })
            }
          />
        </div>
        <div>
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Color" />
          </p>
          <ColorPicker
            data={badge?.icon}
            full
            className="h-[38px]"
            value={badge?.icon?.stringColor ?? badge?.icon?.colour}
            gradients={false}
            onChange={(c: any, datas) => {
              setBadge({
                ...badge,
                icon: {
                  ...badge?.icon,
                  position: badge?.icon?.position ?? "left",
                  colour: c,
                  stringColor: c,
                },
              });
            }}
          />
        </div>
        <div className="flex items-start justify-start gap-4 lg:col-span-3">
          <div>
            <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
              <FormattedMessage id="Icon" />
            </p>
            <IconPicker
              icon={badge?.icon?.component}
              onSelect={(component) => {
                setBadge({
                  ...badge,
                  icon: {
                    ...badge?.icon,
                    position: badge?.icon?.position ?? "left",
                    enabled: true,
                    component,
                  },
                });
              }}
            />
          </div>
          <div className="w-full">
            <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
              <FormattedMessage id="Position" />
            </p>
            <div className="flex items-center justify-between">
              <div
                className={classNames(
                  "w-full h-[40px] text-sm p-2 text-dark-100 rounded-l-lg border-l border-t border-b border-dark-300 text-center font-semibold cursor-pointer",
                  {
                    "bg-green !text-white bg-opacity-30 border-green":
                      badge?.icon?.position === "left",
                  }
                )}
                onClick={() =>
                  setBadge({
                    ...badge,
                    icon: { ...badge?.icon, position: "left" },
                  })
                }
              >
                Left
              </div>
              <div
                className={classNames(
                  "w-full h-[40px] text-sm p-2 text-dark-100 border-t border-b border-dark-300 text-center font-semibold cursor-pointer",
                  {
                    "bg-green !text-white bg-opacity-30 border-green":
                      badge?.icon?.position === "right",
                  }
                )}
                onClick={() =>
                  setBadge({
                    ...badge,
                    icon: { ...badge?.icon, position: "right" },
                  })
                }
              >
                Right
              </div>
              <div
                className={classNames(
                  "w-full h-[40px] text-sm p-2 text-dark-100 rounded-r-lg border-t border-r border-b border-dark-300 text-center font-semibold cursor-pointer",
                  {
                    "bg-green !text-white bg-opacity-30 border-green":
                      badge?.icon?.position === "left-right",
                  }
                )}
                onClick={() =>
                  setBadge({
                    ...badge,
                    icon: { ...badge?.icon, position: "left-right" },
                  })
                }
              >
                Left & Right
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};