import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .horizontal-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .interactive-section {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }
        
        .output-text {
          font-family: monospace;
          font-size: 13px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
          padding: 8px;
          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
          border-radius: 4px;
          min-height: 24px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
        <dees-input-text 
          .label=${'Username'} 
          .value=${'johndoe'}
          .key=${'username'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Email Address'} 
          .value=${'john@example.com'} 
          .description=${'We will never share your email with anyone'}
          .key=${'email'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Password'} 
          .isPasswordBool=${true} 
          .value=${'secret123'}
          .key=${'password'}
        ></dees-input-text>
      </dees-panel>
      
      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
        <div class="horizontal-group">
          <dees-input-text 
            .label=${'First Name'} 
            .value=${'John'} 
            .layoutMode=${'horizontal'}
            .key=${'firstName'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'Last Name'} 
            .value=${'Doe'} 
            .layoutMode=${'horizontal'}
            .key=${'lastName'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'Age'} 
            .value=${'28'} 
            .layoutMode=${'horizontal'}
            .key=${'age'}
          ></dees-input-text>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
        <dees-input-text 
          .label=${'Label on Top (Default)'} 
          .value=${'Standard layout'} 
          .labelPosition=${'top'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Label on Left'} 
          .value=${'Inline label'} 
          .labelPosition=${'left'}
        ></dees-input-text>
        
        <div class="grid-layout">
          <dees-input-text 
            .label=${'City'} 
            .value=${'New York'} 
            .labelPosition=${'left'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'ZIP Code'} 
            .value=${'10001'} 
            .labelPosition=${'left'}
          ></dees-input-text>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
        <dees-input-text 
          .label=${'Required Field'} 
          .required=${true}
          .key=${'requiredField'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Disabled Field'} 
          .value=${'Cannot edit this'} 
          .disabled=${true}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'Field with Error'} 
          .value=${'invalid@'} 
          .validationText=${'Please enter a valid email address'}
          .validationState=${'invalid'}
        ></dees-input-text>
      </dees-panel>
      
      <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
        <dees-input-text 
          .label=${'Password with Toggle'} 
          .isPasswordBool=${true}
          .value=${'mySecurePassword123'}
          .description=${'Click the eye icon to show/hide password'}
        ></dees-input-text>
        
        <dees-input-text 
          .label=${'API Key'} 
          .isPasswordBool=${true}
          .value=${'sk-1234567890abcdef'}
          .description=${'Keep this key secure and never share it'}
        ></dees-input-text>
      </dees-panel>
      
      <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the inputs to see real-time value changes'}>
        <dees-input-text 
          .label=${'Dynamic Input'} 
          .placeholder=${'Type something here...'}
          @changeSubject=${(event) => {
            const output = document.querySelector('#text-input-output');
            if (output && event.detail) {
              output.textContent = `Current value: "${event.detail.getValue()}"`;
            }
          }}
        ></dees-input-text>
        
        <div class="interactive-section">
          <div id="text-input-output" class="output-text">Current value: ""</div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;