import { forwardRef } from "react";

/**
 * Message - AI prompt input
 *
 * id:          string - textarea id, used for the sr-only label (default: "message-ai")
 * value:       string - controlled textarea value
 * onChange:    function - textarea change handler
 * placeholder: string (default: "Type your message...")
 * disabled:    boolean
 * hint:        string | ReactNode - subtext shown below the component
 * attachments: ReactNode - rendered in the header slot above the textarea
 * onAttach:    function - attach button click handler
 * onDictate:   function - dictate button click handler
 * onSend:      function - send button click handler
 */
const Message = forwardRef(function Message(
  {
    id = "message-ai",
    value = "",
    onChange,
    placeholder = "Type your message...",
    disabled = false,
    hint = "AI can make mistakes. Don't type in personal information.",
    attachments,
    onAttach,
    onDictate,
    onSend,
    className = "",
    ...props
  },
  ref
) {
  const classes = [
    "prs-message",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} className={classes} {...props}>
      {attachments && <header>{attachments}</header>}

      <label htmlFor={id} className="sr-only">Message</label>
      <textarea
        id={id}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled}
      />

      <footer>
        <div>
          <button
            type="button"
            className="prs-btn prs-btn-tertiary prs-btn-square"
            disabled={disabled}
            aria-label="Attach"
            onClick={onAttach}
          >
            <AttachIcon />
          </button>
        </div>
        <div>
          <button
            type="button"
            className="prs-btn prs-btn-tertiary prs-btn-square"
            disabled={disabled}
            aria-label="Dictate"
            onClick={onDictate}
          >
            <MicIcon />
          </button>
          <button
            type="button"
            className="prs-btn prs-btn-primary prs-btn-square"
            disabled={disabled || !value.length}
            aria-label="Send"
            onClick={onSend}
          >
            <SendIcon />
          </button>
        </div>
      </footer>

      {hint && <span className="prs-hint">{hint}</span>}
    </div>
  );
});

export default Message;

const AttachIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img" aria-hidden="true">
    <use href="/_assets/prs-icons.svg#edit-add" />
  </svg>
);

const MicIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img" aria-hidden="true">
    <use href="/_assets/prs-icons.svg#media-microphone" />
  </svg>
);

const SendIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img" aria-hidden="true">
    <use href="/_assets/prs-icons.svg#uncategorized-send" />
  </svg>
);