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

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;
        }
        
        .horizontal-group {
          display: flex;
          gap: 24px;
          align-items: flex-start;
        }
        
        .info-box {
          margin-top: 16px;
          padding: 12px;
          background: #e3f2fd;
          border-radius: 4px;
          font-size: 14px;
          color: #1976d2;
        }
        
        @media (prefers-color-scheme: dark) {
          .info-box {
            background: #1e3a5f;
            color: #90caf9;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
        <dees-input-typelist
          .label=${'Tags'}
          .description=${'Add tags by typing and pressing Enter'}
          .value=${['javascript', 'typescript', 'web-components']}
        ></dees-input-typelist>
        
        <dees-input-typelist
          .label=${'Team Members'}
          .description=${'Add email addresses of team members'}
          .value=${['alice@example.com', 'bob@example.com']}
        ></dees-input-typelist>
      </dees-panel>
      
      <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
        <dees-input-typelist
          .label=${'Your Skills'}
          .description=${'List your professional skills'}
          .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
        ></dees-input-typelist>
        
        <div class="horizontal-group">
          <dees-input-typelist
            .label=${'Categories'}
            .layoutMode=${'horizontal'}
            .value=${['Technology', 'Design', 'Business']}
          ></dees-input-typelist>
          
          <dees-input-typelist
            .label=${'Keywords'}
            .layoutMode=${'horizontal'}
            .value=${['innovation', 'startup', 'growth']}
          ></dees-input-typelist>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
        <dees-input-typelist
          .label=${'Project Dependencies'}
          .description=${'List all required npm packages'}
          .required=${true}
          .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
        ></dees-input-typelist>
        
        <dees-input-typelist
          .label=${'System Tags'}
          .description=${'These tags are managed by the system'}
          .disabled=${true}
          .value=${['system', 'protected', 'readonly']}
        ></dees-input-typelist>
      </dees-panel>
      
      <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
        <dees-form>
          <dees-input-text .label=${'Article Title'} .required=${true}></dees-input-text>
          <dees-input-text 
            .label=${'Summary'} 
            .inputType=${'textarea'}
            .description=${'Brief description of the article'}
          ></dees-input-text>
          <dees-input-typelist
            .label=${'Tags'}
            .description=${'Add relevant tags for better discoverability'}
            .value=${['tutorial', 'web-development']}
          ></dees-input-typelist>
          <dees-input-typelist
            .label=${'Co-Authors'}
            .description=${'Add email addresses of co-authors'}
          ></dees-input-typelist>
        </dees-form>
        
        <div class="info-box">
          <strong>Tip:</strong> Type a value and press Enter to add it to the list. Click on any item to remove it.
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;