import { useRef } from "react";
import { Input } from "components/Input";
import { AddTiny } from "components/Icons/AddTiny";
import { DashboardContainer } from "./SettingsContent";
import { EditTiny } from "components/Icons/EditTiny";

export function GeneralSettings(props: {
  nameValue: string;
  setNameValue: (v: string) => void;
  descriptionValue: string;
  setDescriptionValue: (v: string) => void;
  iconPreview: string | null;
  setIconPreview: (v: string | null) => void;
  setIconFile: (f: File | null) => void;
}) {
  let fileInputRef = useRef<HTMLInputElement>(null);

  return (
    <DashboardContainer section="General Settings">

      <div className="flex flex-col gap-2 pb-2">
        <p className=" text-secondary  font-bold">
          Logo <span className="font-normal">(optional)</span>
        </p>
        <div className="relative w-fit">
          {props.iconPreview && (
            <div
              className="absolute top-0 -right-1 rounded-full bg-accent-1 text-accent-2 p-1 cursor-pointer"
              onClick={() => fileInputRef.current?.click()}
            >
              <EditTiny />
            </div>
          )}
          <div
            className={`w-16 h-16 rounded-full flex items-center justify-center cursor-pointer  ${props.iconPreview ? "border border-border-light hover:outline-border" : "border border-dotted border-accent-contrast hover:outline-accent-contrast"} selected-outline`}
            onClick={() => fileInputRef.current?.click()}
          >
            {props.iconPreview ? (
              <img
                src={props.iconPreview}
                alt="Logo preview"
                className="w-full h-full rounded-full object-cover"
              />
            ) : (
              <AddTiny className="text-accent-1" />
            )}
          </div>
        </div>
        <input
          type="file"
          accept="image/*"
          className="hidden"
          ref={fileInputRef}
          onChange={(e) => {
            const file = e.target.files?.[0];
            if (file) {
              props.setIconFile(file);
              const reader = new FileReader();
              reader.onload = (ev) => {
                props.setIconPreview(ev.target?.result as string);
              };
              reader.readAsDataURL(file);
            }
          }}
        />
      </div>

      <label>
        <p className="text-secondary pt-3 font-bold">Publication Name</p>
        <Input
          className="input-with-border w-full text-primary max-w-prose"
          type="text"
          id="pubName"
          value={props.nameValue}
          onChange={(e) => props.setNameValue(e.currentTarget.value)}
        />
      </label>

      <label>
        <p className="text-secondary pt-3 font-bold">
          Description <span className="font-normal">(optional)</span>
        </p>
        <Input
          textarea
          className="input-with-border w-full text-primary max-w-prose"
          rows={3}
          id="pubDescription"
          value={props.descriptionValue}
          onChange={(e) => props.setDescriptionValue(e.currentTarget.value)}
        />
      </label>
    </DashboardContainer>
  );
}
