import { html, css, cssManager } from '@design.estate/dees-element';
import './dees-settings.js';
import type { ISettingsField, ISettingsAction } from './dees-settings.js';

export const demoFunc = () => {
  const acmeFields: ISettingsField[] = [
    { key: 'email', label: 'Account email', value: 'admin@example.com' },
    { key: 'status', label: 'Status', value: 'enabled' },
    { key: 'mode', label: 'Mode', value: 'production' },
    { key: 'autoRenew', label: 'Auto-renew', value: 'on' },
    { key: 'threshold', label: 'Renewal threshold', value: '30 days' },
  ];

  const acmeActions: ISettingsAction[] = [
    { name: 'Edit', action: () => console.log('Edit clicked') },
  ];

  const emptyActions: ISettingsAction[] = [
    { name: 'Configure', action: () => console.log('Configure clicked') },
  ];

  const multiActions: ISettingsAction[] = [
    { name: 'Reset', action: () => console.log('Reset clicked') },
    { name: 'Edit', action: () => console.log('Edit clicked') },
  ];

  return html`
    <dees-demowrapper>
      <style>
        ${css`
          .demoBox {
            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 600px;
          }
        `}
      </style>
      <div class="demoBox">
        <dees-settings
          .heading=${'ACME Settings'}
          .settingsFields=${acmeFields}
          .actions=${acmeActions}
        ></dees-settings>

        <dees-settings
          .heading=${'ACME Settings'}
          .description=${'No ACME configuration yet. Click Configure to set up automated TLS certificate issuance.'}
          .actions=${emptyActions}
        ></dees-settings>

        <dees-settings
          .heading=${'Server Config'}
          .settingsFields=${[
            { key: 'host', label: 'Hostname', value: 'proxy.example.com' },
            { key: 'port', label: 'Port', value: '443' },
          ]}
          .actions=${multiActions}
        ></dees-settings>
      </div>
    </dees-demowrapper>
  `;
};