import Stack from "@/twui/components/layout/Stack";
import { Dispatch, SetStateAction, useRef } from "react";
import Button from "@/twui/components/layout/Button";
import Modal from "@/twui/components/elements/Modal";
import H3 from "@/twui/components/layout/H3";
import Span from "@/twui/components/layout/Span";
import useStatus from "@/twui/components/hooks/useStatus";
import Textarea from "@/twui/components/form/Textarea";
import LucideIcon from "@/twui/components/elements/lucide-icon";

type Props = {
    setLog: Dispatch<SetStateAction<string | undefined>>;
};

export default function ServiceClusterServerLogSelectorSetCustomLog({
    setLog,
}: Props) {
    const { open, setOpen } = useStatus();

    const customLogRef = useRef("");

    return (
        <Modal
            target={
                <Button
                    title="Enter custom command"
                    size="small"
                    color="gray"
                    className="w-[42px] h-[42px]"
                >
                    <LucideIcon name="Edit3" size={14} />
                </Button>
            }
            setOpen={setOpen}
            open={open}
        >
            <Stack>
                <Stack className="gap-1">
                    <H3 className="admin-h3">Enter a custom Command</H3>
                    <Span variant="faded">
                        Enter a command to run a custom log
                    </Span>
                </Stack>
                <Textarea
                    placeholder="Enter custom command"
                    changeHandler={(v) => {
                        customLogRef.current = v;
                    }}
                    autoFocus
                />
                <Button
                    title="Set Custom Command"
                    onClick={() => {
                        setLog(customLogRef.current.trim());
                        setOpen(false);
                    }}
                >
                    Set Custom Command
                </Button>
            </Stack>
        </Modal>
    );
}
