import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import './editor.scss';
import SidePanel from './side-panel';

export default function Edit({ attributes, setAttributes }) {
  const { displayMode, customBreakpoint, breakpointValue, minBreakpoint, maxBreakpoint } = attributes;
  
  // Déterminer la classe CSS à utiliser
  let breakpointClass = '';
  
  if (displayMode === 'desktop') {
    if (customBreakpoint) {
      breakpointClass = `breakpoint-desktop-${breakpointValue}`;
    } else {
      breakpointClass = 'breakpoint-desktop-950';
    }
  } else if (displayMode === 'mobile') {
    if (customBreakpoint) {
      breakpointClass = `breakpoint-mobile-${breakpointValue}`;
    } else {
      breakpointClass = 'breakpoint-mobile-768';
    }
  } else if (displayMode === 'tablet') {
    if (customBreakpoint) {
      breakpointClass = `breakpoint-tablet-${minBreakpoint}-${maxBreakpoint}`;
    } else {
      breakpointClass = 'breakpoint-tablet-768-1024';
    }
  }
  
  const blockProps = useBlockProps({
    className: `breakpoint-block ${breakpointClass}`,
  });

  // Récupérer les informations sur le breakpoint pour l'affichage dans l'éditeur
  const getBreakpointInfo = () => {
    if (displayMode === 'desktop') {
      const bp = customBreakpoint ? breakpointValue : 950;
      return __(`Desktop Only (≥ ${bp}px)`, "orphic-ui");
    } else if (displayMode === 'mobile') {
      const bp = customBreakpoint ? breakpointValue : 768;
      return __(`Mobile Only (< ${bp}px)`, "orphic-ui");
    } else if (displayMode === 'tablet') {
      const minBp = customBreakpoint ? minBreakpoint : 768;
      const maxBp = customBreakpoint ? maxBreakpoint : 1024;
      return __(`Tablet Only (${minBp}px - ${maxBp}px)`, "orphic-ui");
    }
    return "";
  };

  return (
    <div {...blockProps}>
      <div className="breakpoint-content">
        <div className="breakpoint-info">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM281 209L385 313c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-72-72-56 56 49 49c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L153 329c-9.4-9.4-9.4-24.6 0-33.9l72-72L153 151c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l94 94z"/>
          </svg>
          <div className="breakpoint-message">
            {__("Breakpoint Content", "orphic-ui")}
            <span>{getBreakpointInfo()}</span>
          </div>
        </div>
        <InnerBlocks />
      </div>
      <SidePanel attributes={attributes} setAttributes={setAttributes} />
    </div>
  );
} 