import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
import './dees-form.js';
import './dees-form-submit.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;
        }
        
        .spacer {
          height: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          font-size: 14px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
        <dees-input-dropdown
          .label=${'Select Country'}
          .options=${[
            { option: 'United States', key: 'us' },
            { option: 'Canada', key: 'ca' },
            { option: 'Germany', key: 'de' },
            { option: 'France', key: 'fr' },
            { option: 'United Kingdom', key: 'uk' },
            { option: 'Australia', key: 'au' },
            { option: 'Japan', key: 'jp' },
            { option: 'Brazil', key: 'br' }
          ]}
          .selectedOption=${{ option: 'United States', key: 'us' }}
        ></dees-input-dropdown>
        
        <dees-input-dropdown
          .label=${'Select Role'}
          .options=${[
            { option: 'Administrator', key: 'admin' },
            { option: 'Editor', key: 'editor' },
            { option: 'Viewer', key: 'viewer' },
            { option: 'Guest', key: 'guest' }
          ]}
        ></dees-input-dropdown>
      </dees-panel>
      
      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
        <dees-input-dropdown
          .label=${'Priority Level'}
          .enableSearch=${false}
          .options=${[
            { option: 'High', key: 'high' },
            { option: 'Medium', key: 'medium' },
            { option: 'Low', key: 'low' }
          ]}
          .selectedOption=${{ option: 'Medium', key: 'medium' }}
        ></dees-input-dropdown>
      </dees-panel>
      
      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
        <div class="horizontal-group">
          <dees-input-dropdown
            .label=${'Department'}
            .layoutMode=${'horizontal'}
            .options=${[
              { option: 'Engineering', key: 'eng' },
              { option: 'Design', key: 'design' },
              { option: 'Marketing', key: 'marketing' },
              { option: 'Sales', key: 'sales' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Team Size'}
            .layoutMode=${'horizontal'}
            .enableSearch=${false}
            .options=${[
              { option: '1-5', key: 'small' },
              { option: '6-20', key: 'medium' },
              { option: '21-50', key: 'large' },
              { option: '50+', key: 'xlarge' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Location'}
            .layoutMode=${'horizontal'}
            .options=${[
              { option: 'Remote', key: 'remote' },
              { option: 'On-site', key: 'onsite' },
              { option: 'Hybrid', key: 'hybrid' }
            ]}
          ></dees-input-dropdown>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
        <dees-input-dropdown
          .label=${'Required Field'}
          .required=${true}
          .options=${[
            { option: 'Option A', key: 'a' },
            { option: 'Option B', key: 'b' },
            { option: 'Option C', key: 'c' }
          ]}
        ></dees-input-dropdown>
        
        <dees-input-dropdown
          .label=${'Disabled Dropdown'}
          .disabled=${true}
          .options=${[
            { option: 'Cannot Select', key: 'disabled' }
          ]}
          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
        ></dees-input-dropdown>
      </dees-panel>
      
      <div class="spacer">
        (Spacer to test dropdown positioning)
      </div>
      
      <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
        <dees-input-dropdown
          .label=${'Opens Upward'}
          .options=${[
            { option: 'First Option', key: 'first' },
            { option: 'Second Option', key: 'second' },
            { option: 'Third Option', key: 'third' },
            { option: 'Fourth Option', key: 'fourth' },
            { option: 'Fifth Option', key: 'fifth' }
          ]}
        ></dees-input-dropdown>
      </dees-panel>

      <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
        <dees-input-dropdown
          .label=${'Select Product'}
          .options=${[
            { option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
            { option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
            { option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
          ]}
          @change=${(e: CustomEvent) => {
            const output = document.querySelector('#selection-output');
            if (output && e.detail.value) {
              output.innerHTML = `
                <strong>Selected:</strong> ${e.detail.value.option}<br>
                <strong>Key:</strong> ${e.detail.value.key}<br>
                <strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
                <strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
              `;
            }
          }}
        ></dees-input-dropdown>
        
        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;">
          <em>Select a product to see details...</em>
        </div>
      </dees-panel>

      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
        <dees-form>
          <dees-input-dropdown
            .label=${'Project Type'}
            .key=${'projectType'}
            .required=${true}
            .options=${[
              { option: 'Web Application', key: 'web' },
              { option: 'Mobile Application', key: 'mobile' },
              { option: 'Desktop Application', key: 'desktop' },
              { option: 'API Service', key: 'api' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Development Framework'}
            .key=${'framework'}
            .required=${true}
            .options=${[
              { option: 'React', key: 'react', payload: { type: 'web' } },
              { option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
              { option: 'Angular', key: 'angular', payload: { type: 'web' } },
              { option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
              { option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
              { option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
            ]}
          ></dees-input-dropdown>
          
          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`