import { html, css, cssManager } from '@design.estate/dees-element';
import { DeesModal } from './dees-modal.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .demo-section {
        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
        border-radius: 8px;
        padding: 24px;
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
      }
      
      .demo-section h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }
      
      .demo-section p {
        color: ${cssManager.bdTheme('#666', '#999')};
        margin-bottom: 16px;
      }
      
      .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <div class="demo-section">
      <h3>Modal Width Variations</h3>
      <p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Small Modal',
            width: 'small',
            content: html`
              <p>This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.</p>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'OK',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Small Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Medium Modal (Default)',
            width: 'medium',
            content: html`
              <dees-form>
                <dees-input-text .label=${'Username'}></dees-input-text>
                <dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
                <dees-input-text .label=${'Password'} .inputType=${'password'}></dees-input-text>
              </dees-form>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Sign Up',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Medium Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Large Modal',
            width: 'large',
            content: html`
              <h4>Wide Content Area</h4>
              <p>This large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.</p>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
                <dees-input-text .label=${'First Name'}></dees-input-text>
                <dees-input-text .label=${'Last Name'}></dees-input-text>
                <dees-input-text .label=${'Company'}></dees-input-text>
                <dees-input-text .label=${'Position'}></dees-input-text>
              </div>
            `,
            menuOptions: [{
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Large Modal</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Fullscreen Modal',
            width: 'fullscreen',
            content: html`
              <h4>Fullscreen Experience</h4>
              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. Great for immersive experiences, detailed editors, or when you need maximum space.</p>
              <p>The content area can be as tall as needed and will scroll if necessary.</p>
              <div style="height: 200px; background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
                <span style="color: ${cssManager.bdTheme('#999', '#666')}">Large content area</span>
              </div>
            `,
            menuOptions: [{
              name: 'Close',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Fullscreen Modal</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Custom Width & Constraints</h3>
      <p>You can also set custom pixel widths and min/max constraints.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Custom Width (700px)',
            width: 700,
            content: html`
              <p>This modal has a custom width of exactly 700 pixels.</p>
            `,
            menuOptions: [{
              name: 'Close',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Custom 700px</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'With Max Width',
            width: 'large',
            maxWidth: 600,
            content: html`
              <p>This modal is set to 'large' but constrained by a maxWidth of 600px.</p>
            `,
            menuOptions: [{
              name: 'Got it',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Max Width 600px</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'With Min Width',
            width: 300,
            minWidth: 400,
            content: html`
              <p>This modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.</p>
            `,
            menuOptions: [{
              name: 'OK',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Min Width 400px</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Button Variations</h3>
      <p>Modals can have different button configurations with proper spacing.</p>
      <div class="button-grid">
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Multiple Actions',
            content: html`
              <p>This modal demonstrates multiple buttons with proper spacing between them.</p>
            `,
            menuOptions: [{
              name: 'Delete',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Cancel',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save Changes',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Three Buttons</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Single Action',
            content: html`
              <p>Sometimes you just need one button.</p>
            `,
            menuOptions: [{
              name: 'Acknowledge',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Single Button</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'No Actions',
            content: html`
              <p>This modal has no buttons. Click outside or press ESC to close.</p>
              <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')};">This is useful for informational modals that don't require user action.</p>
            `,
            menuOptions: [],
          });
        }}>No Buttons</dees-button>
        
        <dees-button @click=${() => {
          DeesModal.createAndShow({
            heading: 'Long Button Labels',
            content: html`
              <p>Testing button layout with longer labels.</p>
            `,
            menuOptions: [{
              name: 'Discard All Changes',
              action: async (modal) => modal.destroy()
            }, {
              name: 'Save and Continue Editing',
              action: async (modal) => modal.destroy()
            }],
          });
        }}>Long Labels</dees-button>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Responsive Behavior</h3>
      <p>All modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.</p>
      <dees-button @click=${() => {
        DeesModal.createAndShow({
          heading: 'Responsive Modal',
          width: 'large',
          content: html`
            <p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
          `,
          menuOptions: [{
            name: 'Close',
            action: async (modal) => modal.destroy()
          }],
        });
      }}>Test Responsive</dees-button>
    </div>
  </div>
`