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

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;
        }
        
        .demo-section {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 24px;
          position: relative;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section {
            background: #1a1a1a;
          }
        }
        
        .demo-section h3 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #0069f2;
          font-size: 18px;
        }
        
        .demo-section p {
          margin-top: 0;
          margin-bottom: 16px;
          color: #666;
          font-size: 14px;
        }
        
        @media (prefers-color-scheme: dark) {
          .demo-section p {
            color: #999;
          }
        }
        
        .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">
      <div class="demo-section">
        <h3>Basic Dropdowns</h3>
        <p>Standard dropdown with search functionality and various options</p>
        
        <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>
      </div>
      
      <div class="demo-section">
        <h3>Without Search</h3>
        <p>Dropdown with search functionality disabled for simpler selection</p>
        
        <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>
      </div>
      
      <div class="demo-section">
        <h3>Horizontal Layout</h3>
        <p>Multiple dropdowns in a horizontal layout for compact forms</p>
        
        <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>
      </div>
      
      <div class="demo-section">
        <h3>States</h3>
        <p>Different states and configurations</p>
        
        <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>
      </div>
      
      <div class="spacer">
        (Spacer to test dropdown positioning)
      </div>
      
      <div class="demo-section">
        <h3>Bottom Positioning</h3>
        <p>Dropdown that opens upward when near bottom of viewport</p>
        
        <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>
      </div>
    </div>
  </dees-demowrapper>
`