import { html, css } 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;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic Rich Text Editor'} .subtitle=${'A full-featured rich text editor with formatting toolbar'}>
        <dees-input-richtext 
          .label=${'Article Content'} 
          .value=${'<h1>Welcome to the Rich Text Editor!</h1><p>This is a feature-rich editor built with TipTap. You can:</p><ul><li><strong>Format text</strong> with <em>various</em> <u>styles</u></li><li>Create different heading levels</li><li>Add <a href="https://example.com">links</a> to external resources</li><li>Write <code>inline code</code> or code blocks</li></ul><blockquote><p>Use the toolbar above to explore all the formatting options available!</p></blockquote><p>Start typing to see the magic happen...</p>'}
          .description=${'Use the toolbar to format your content with headings, lists, links, and more'}
          .showWordCount=${true}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${'2. With Placeholder'} .subtitle=${'Empty editor with placeholder text'}>
        <dees-input-richtext 
          .label=${'Blog Post'} 
          .placeholder=${'Start writing your blog post here...'}
          .showWordCount=${true}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${'3. Different Heights'} .subtitle=${'Editors with different minimum heights for various use cases'}>
        <div class="grid-layout">
          <dees-input-richtext 
            .label=${'Short Note'} 
            .minHeight=${150}
            .placeholder=${'Quick note...'}
            .showWordCount=${false}
          ></dees-input-richtext>
          
          <dees-input-richtext 
            .label=${'Extended Content'} 
            .minHeight=${300}
            .placeholder=${'Write your extended content here...'}
            .showWordCount=${true}
          ></dees-input-richtext>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'4. Code Examples'} .subtitle=${'Editor pre-filled with code examples'}>
        <dees-input-richtext 
          .label=${'Technical Documentation'} 
          .value=${'<h2>Installation Guide</h2><p>To install the package, run the following command:</p><pre><code>npm install @design.estate/dees-catalog</code></pre><p>Then import the component in your TypeScript file:</p><pre><code>import { DeesInputRichtext } from "@design.estate/dees-catalog";</code></pre><p>You can now use the <code>&lt;dees-input-richtext&gt;</code> element in your templates.</p>'}
          .minHeight=${250}
          .showWordCount=${true}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only rich text content'}>
        <dees-input-richtext 
          .label=${'Published Article (Read Only)'} 
          .value=${'<h2>The Future of Web Components</h2><p>Web Components have revolutionized how we build modern web applications...</p><blockquote><p>"The future of web development lies in reusable, encapsulated components."</p></blockquote>'}
          .disabled=${true}
          .showWordCount=${true}
        ></dees-input-richtext>
      </dees-panel>
      
      <dees-panel .title=${'6. Interactive Demo'} .subtitle=${'Type in the editor below and see the HTML output'}>
        <dees-input-richtext 
          id="interactive-editor"
          .label=${'Try it yourself'} 
          .placeholder=${'Type something here...'}
          .showWordCount=${true}
          @change=${(e: CustomEvent) => {
            const output = document.querySelector('#output-preview');
            if (output) {
              output.textContent = e.detail.value;
            }
          }}
        ></dees-input-richtext>
        
        <div class="output-preview" id="output-preview">
          <em>HTML output will appear here...</em>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;