import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TooltipDirective } from '@sda/base-ui';
import type { DbLayoutPreset } from '../../types/dashboard.types';

interface PresetOption {
  preset: DbLayoutPreset;
  label: string;
  svg: string;
}

@Component({
  selector: 'db-layout-preset-picker',
  standalone: true,
  imports: [CommonModule, TooltipDirective],
  templateUrl: './db-layout-preset-picker.component.html',
  styleUrl: './db-layout-preset-picker.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { 'class': 'db-layout-preset-picker' },
})
export class DbLayoutPresetPickerComponent {
  readonly selected = input<DbLayoutPreset>('custom');
  readonly presetSelect = output<DbLayoutPreset>();

  protected readonly presets: PresetOption[] = [
    {
      preset: 'single',
      label: 'Single',
      svg: `<rect x="2" y="2" width="36" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
    },
    {
      preset: 'two-column',
      label: 'Two Column',
      svg: `<rect x="2" y="2" width="16" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="2" width="16" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
    },
    {
      preset: 'sidebar-main',
      label: 'Sidebar + Main',
      svg: `<rect x="2" y="2" width="10" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="16" y="2" width="22" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
    },
    {
      preset: 'four-grid',
      label: 'Four Grid',
      svg: `<rect x="2" y="2" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="2" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="2" y="17" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="17" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
    },
    {
      preset: 'analytics',
      label: 'Analytics',
      svg: `<rect x="2" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="15" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="28" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="2" y="14" width="22" height="14" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="28" y="14" width="10" height="14" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
    },
    {
      preset: 'custom',
      label: 'Custom',
      svg: `<rect x="2" y="2" width="36" height="26" rx="2" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="3 2"/><line x1="14" y1="2" x2="14" y2="28" stroke="currentColor" stroke-width="0.5" opacity="0.3"/><line x1="26" y1="2" x2="26" y2="28" stroke="currentColor" stroke-width="0.5" opacity="0.3"/><line x1="2" y1="15" x2="38" y2="15" stroke="currentColor" stroke-width="0.5" opacity="0.3"/>`,
    },
  ];
}