import { html, css, cssManager } 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;
        }
        
        .upload-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        
        @media (max-width: 768px) {
          .upload-grid {
            grid-template-columns: 1fr;
          }
        }
        
        .upload-box {
          padding: 16px;
          background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
          border-radius: 4px;
          border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
        }
        
        .upload-box h4 {
          margin-top: 0;
          margin-bottom: 16px;
          color: ${cssManager.bdTheme('#333', '#fff')};
          font-size: 16px;
        }
        
        .info-section {
          margin-top: 32px;
          padding: 16px;
          background: ${cssManager.bdTheme('#fff3cd', '#332701')};
          border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
          border-radius: 4px;
          color: ${cssManager.bdTheme('#856404', '#ffecb5')};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
        <dees-input-fileupload
          .label=${'Attachments'}
          .description=${'Upload files by clicking or dragging'}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'Resume'}
          .description=${'Upload your CV in PDF format'}
          .buttonText=${'Choose Resume...'}
        ></dees-input-fileupload>
      </dees-panel>
      
      <dees-panel .title=${'Multiple Upload Areas'} .subtitle=${'Different upload zones for various file types'}>
        <div class="upload-grid">
          <div class="upload-box">
            <h4>Profile Picture</h4>
            <dees-input-fileupload
              .label=${'Avatar'}
              .description=${'JPG, PNG or GIF'}
              .buttonText=${'Select Image...'}
            ></dees-input-fileupload>
          </div>
          
          <div class="upload-box">
            <h4>Cover Image</h4>
            <dees-input-fileupload
              .label=${'Banner'}
              .description=${'Recommended: 1200x400px'}
              .buttonText=${'Select Banner...'}
            ></dees-input-fileupload>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different upload states for validation'}>
        <dees-input-fileupload
          .label=${'Identity Document'}
          .description=${'Required for verification'}
          .required=${true}
          .buttonText=${'Upload Document...'}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'System Files'}
          .description=${'File upload is disabled'}
          .disabled=${true}
          .value=${[]}
        ></dees-input-fileupload>
      </dees-panel>
      
      <dees-panel .title=${'Application Form'} .subtitle=${'Complete form with file upload integration'}>
        <dees-form>
          <dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
          <dees-input-text .label=${'Email'} .inputType=${'email'} .required=${true}></dees-input-text>
          <dees-input-fileupload
            .label=${'Resume'}
            .description=${'Upload your CV (PDF preferred)'}
            .required=${true}
          ></dees-input-fileupload>
          <dees-input-fileupload
            .label=${'Portfolio'}
            .description=${'Optional: Upload work samples'}
          ></dees-input-fileupload>
          <dees-input-text
            .label=${'Cover Letter'}
            .inputType=${'textarea'}
            .description=${'Tell us why you would be a great fit'}
          ></dees-input-text>
        </dees-form>
        
        <div class="info-section">
          <h4>Features:</h4>
          <ul>
            <li>Click to select files or drag & drop</li>
            <li>Multiple file selection support</li>
            <li>Visual feedback for drag operations</li>
            <li>Right-click files to remove them</li>
            <li>Integrates seamlessly with forms</li>
          </ul>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;