import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml } from '../../utils/escape';

interface FormButtonProps {
  text?: string;
  style?: CSSProperties;
}

export const FormButton: UserComponent<FormButtonProps> = ({
  text = 'Submit',
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  return (
    <button
      ref={(ref: HTMLButtonElement | null): void => { if (ref) connect(drag(ref)); }}
      type="submit"
      onClick={(e) => e.preventDefault()}
      style={{
        padding: '12px 32px',
        backgroundColor: '#3b82f6',
        color: '#ffffff',
        border: 'none',
        borderRadius: '6px',
        fontSize: '16px',
        fontWeight: '600',
        cursor: 'pointer',
        outline: selected ? '2px solid #3b82f6' : 'none',
        outlineOffset: selected ? '2px' : '0',
        ...style,
      }}
    >
      {text}
    </button>
  );
};

/* ---------- Craft config ---------- */

FormButton.craft = {
  displayName: 'Submit Button',
  props: {
    text: 'Submit',
    style: {
      backgroundColor: '#3b82f6',
      color: '#ffffff',
      padding: '12px 32px',
      borderRadius: '6px',
      fontWeight: '600',
      fontSize: '16px',
      border: 'none',
    },
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(FormButton as any).toHtml = (props: FormButtonProps, _childrenHtml: string) => {
  const styleStr = cssPropsToString({
    padding: '12px 32px',
    border: 'none',
    cursor: 'pointer',
    ...props.style,
  });
  const escapedText = escapeHtml(props.text || 'Submit');
  return {
    html: `<button type="submit"${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</button>`,
  };
};