import { createSignal, onMount } from "solid-js";
import type { Component } from "solid-js";
import "./GreetingPanel.css";
import { createGreetingPanelFunctions } from "./GreetingPanel.functions";
import api from "../../api/api";

interface GreetingState {
  name: string;
  greeting: any | null;
  loading: boolean;
  error: string | null;
}

interface GreetingPanelProps {
  [key: string]: any;
}

const GreetingPanel: Component<GreetingPanelProps> = (props) => {
  const [state, setState] = createSignal<GreetingState>({
    name: "World",
    greeting: null,
    loading: false,
    error: null
  });

  const functions = createGreetingPanelFunctions(
    state,
    setState,
    props,
    api
  );

  onMount(() => {
    functions.initialize();
  });

  const handleInputChange = (e: Event): void => {
    const target = e.target as HTMLInputElement;
    functions.setName(target.value);
  };

  return (
    <div class="nano-panel">
      <div class="nano-panel-header">Greeting</div>
      <div class="nano-panel-content">
        <label class="nano-label">Name</label>
        <input 
          type="text" 
          class="nano-input" 
          placeholder="Enter name"
          value={state().name}
          onInput={handleInputChange}
        />
        <button 
          class="nano-button" 
          onClick={functions.sendGreeting}
          disabled={state().loading}
        >
          {state().loading ? "Sending..." : "Send Greeting"}
        </button>
        
        {state().greeting && (
          <div class="greeting-output">
            {state().greeting.data}
          </div>
        )}

        {state().error && (
          <div class="greeting-error">
            Error: {state().error}
          </div>
        )}
      </div>
    </div>
  );
};

export default GreetingPanel;