import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import type { DeesInputRadio } from './dees-input-radio.js';

export const demoFunc = () => html`
  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
    // Implement radio group behavior
    const radioGroups = new Map<string, DeesInputRadio[]>();
    
    // Group radios by their container
    const radioContainers = elementArg.querySelectorAll('.radio-group');
    radioContainers.forEach((container) => {
      const radios = Array.from(container.querySelectorAll('dees-input-radio')) as DeesInputRadio[];
      const groupName = container.getAttribute('data-group') || 'default';
      radioGroups.set(groupName, radios);
      
      // Add click handlers for radio group behavior
      radios.forEach((radio) => {
        radio.addEventListener('click', () => {
          if (!radio.disabled && !radio.value) {
            // Uncheck all other radios in the group
            radios.forEach((r) => {
              if (r !== radio) {
                r.value = false;
              }
            });
            radio.value = true;
          }
        });
      });
    });
  }}>
    <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;
        }
        
        @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;
        }
        
        .radio-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 16px;
          background: #f0f0f0;
          border-radius: 4px;
          margin-bottom: 16px;
        }
        
        @media (prefers-color-scheme: dark) {
          .radio-group {
            background: #0a0a0a;
          }
        }
        
        .radio-group-title {
          font-weight: 500;
          margin-bottom: 8px;
          color: #333;
        }
        
        @media (prefers-color-scheme: dark) {
          .radio-group-title {
            color: #ccc;
          }
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 24px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <div class="demo-section">
        <h3>Basic Radio Groups</h3>
        <p>Radio buttons for single-choice selections</p>
        
        <div class="radio-group" data-group="plan">
          <div class="radio-group-title">Select your subscription plan:</div>
          <dees-input-radio 
            .label=${'Basic Plan - $9/month'} 
            .value=${true}
            .key=${'plan-basic'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Pro Plan - $29/month'}
            .key=${'plan-pro'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Enterprise Plan - $99/month'}
            .key=${'plan-enterprise'}
          ></dees-input-radio>
        </div>
        
        <div class="radio-group" data-group="priority">
          <div class="radio-group-title">Task Priority:</div>
          <dees-input-radio 
            .label=${'High Priority'} 
            .key=${'priority-high'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Medium Priority'}
            .value=${true}
            .key=${'priority-medium'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Low Priority'}
            .key=${'priority-low'}
          ></dees-input-radio>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Horizontal Layout</h3>
        <p>Radio buttons arranged horizontally for yes/no questions</p>
        
        <div class="radio-group" data-group="agreement" style="flex-direction: row;">
          <div style="margin-right: 16px;">Do you agree?</div>
          <dees-input-radio 
            .label=${'Yes'} 
            .layoutMode=${'horizontal'} 
            .value=${true}
            .key=${'agree-yes'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'No'} 
            .layoutMode=${'horizontal'}
            .key=${'agree-no'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Maybe'} 
            .layoutMode=${'horizontal'}
            .key=${'agree-maybe'}
          ></dees-input-radio>
        </div>
        
        <div class="radio-group" data-group="experience" style="flex-direction: row;">
          <div style="margin-right: 16px;">Experience Level:</div>
          <dees-input-radio 
            .label=${'Beginner'} 
            .layoutMode=${'horizontal'}
            .key=${'exp-beginner'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Intermediate'} 
            .layoutMode=${'horizontal'}
            .value=${true}
            .key=${'exp-intermediate'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Expert'} 
            .layoutMode=${'horizontal'}
            .key=${'exp-expert'}
          ></dees-input-radio>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Survey Example</h3>
        <p>Multiple radio groups in a survey format</p>
        
        <div class="grid-layout">
          <div class="radio-group" data-group="satisfaction">
            <div class="radio-group-title">How satisfied are you?</div>
            <dees-input-radio .label=${'Very Satisfied'} .key=${'sat-very'}></dees-input-radio>
            <dees-input-radio .label=${'Satisfied'} .value=${true} .key=${'sat-normal'}></dees-input-radio>
            <dees-input-radio .label=${'Neutral'} .key=${'sat-neutral'}></dees-input-radio>
            <dees-input-radio .label=${'Dissatisfied'} .key=${'sat-dis'}></dees-input-radio>
            <dees-input-radio .label=${'Very Dissatisfied'} .key=${'sat-verydis'}></dees-input-radio>
          </div>
          
          <div class="radio-group" data-group="recommend">
            <div class="radio-group-title">Would you recommend us?</div>
            <dees-input-radio .label=${'Definitely'} .key=${'rec-def'}></dees-input-radio>
            <dees-input-radio .label=${'Probably'} .value=${true} .key=${'rec-prob'}></dees-input-radio>
            <dees-input-radio .label=${'Not Sure'} .key=${'rec-unsure'}></dees-input-radio>
            <dees-input-radio .label=${'Probably Not'} .key=${'rec-probnot'}></dees-input-radio>
            <dees-input-radio .label=${'Definitely Not'} .key=${'rec-defnot'}></dees-input-radio>
          </div>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>States</h3>
        <p>Different radio button states</p>
        
        <div class="radio-group" data-group="states">
          <dees-input-radio 
            .label=${'Normal Radio'} 
            .key=${'state-normal'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Selected Radio'} 
            .value=${true}
            .key=${'state-selected'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Disabled Unchecked'} 
            .disabled=${true}
            .key=${'state-disabled1'}
          ></dees-input-radio>
          <dees-input-radio 
            .label=${'Disabled Checked'} 
            .disabled=${true} 
            .value=${true}
            .key=${'state-disabled2'}
          ></dees-input-radio>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>Settings Example</h3>
        <p>Common radio button patterns in settings</p>
        
        <div class="radio-group" data-group="theme">
          <div class="radio-group-title">Theme Preference:</div>
          <dees-input-radio .label=${'Light Theme'} .key=${'theme-light'}></dees-input-radio>
          <dees-input-radio .label=${'Dark Theme'} .value=${true} .key=${'theme-dark'}></dees-input-radio>
          <dees-input-radio .label=${'System Default'} .key=${'theme-system'}></dees-input-radio>
        </div>
        
        <div class="radio-group" data-group="notifications">
          <div class="radio-group-title">Notification Frequency:</div>
          <dees-input-radio .label=${'All Notifications'} .key=${'notif-all'}></dees-input-radio>
          <dees-input-radio .label=${'Important Only'} .value=${true} .key=${'notif-important'}></dees-input-radio>
          <dees-input-radio .label=${'None'} .key=${'notif-none'}></dees-input-radio>
        </div>
      </div>
    </div>
  </dees-demowrapper>
`;