import {
  LiteInput,
  LitePassword,
  LiteTextarea,
  LiteSelect,
  LiteMultiSelect,
  LiteRadio,
  LiteCheckbox,
  LiteDate,
  LiteDateTime,
  LiteFile,
  LiteTable,
  LitePaginator,
  LitePanel,
  LiteLoading
} from 'ngx-lite-form';
import { FormControl, Validators } from '@angular/forms';

import {
  FieldDto,
  SelectFieldDto,
  MultiSelectFieldDto,
  RadioFieldDto,
  DateRangeFieldDto,
  FileFieldDto,
  TableFieldDto,
  PaginatorFieldDto,
  LitePanelAction
} from 'ngx-lite-form';

@Component({
  standalone: true,
  imports: [
    LiteInput,
    LitePassword,
    LiteTextarea,
    LiteSelect,
    LiteMultiSelect,
    LiteRadio,
    LiteCheckbox,
    LiteDate,
    LiteDateTime,
    LiteFile,
    LiteTable,
    LitePaginator,
    LiteLoading
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  // Basic input
  nameField = new FieldDto('Full Name', new FormControl(''));
  
  // Number input
  ageField = new FieldDto('Age', new FormControl(0), 2, 'number');
  
  // Password with validation
  passwordField = new FieldDto('Password', new FormControl('', [
    Validators.required,
    Validators.minLength(8),
    Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)
  ]));
  
  // Textarea
  descriptionField = new FieldDto('Description', new FormControl(''), 4);
  
  // Checkbox (using basic FieldDto for boolean)
  agreeField = new FieldDto('I agree to terms', new FormControl<boolean>(false, { nonNullable: true }));
  
  // Select dropdown
  countryField = new SelectFieldDto(
    'Country',
    new FormControl(''),
    ['USA', 'Canada', 'Mexico'],
    (option) => option
  );
  
  // Multi-select
  skillsField = new MultiSelectFieldDto(
    'Skills',
    new FormControl<string[]>([]),
    ['JavaScript', 'TypeScript', 'Angular', 'React'],
    (option) => option
  );
  
  // Radio group
  planField = new RadioFieldDto(
    'Choose Plan',
    new FormControl(''),
    ['Basic', 'Premium', 'Enterprise'],
    (option) => option
  );
  
  // Single date
  birthdateField: FieldDto = {
    label: 'Birth Date',
    formControl: new FormControl<string>('', { nonNullable: true })
  };
  
  // Date range
  eventDateField: DateRangeFieldDto = {
    label: 'Event Date Range',
    formControl: new FormControl<string[]>(['', ''], { nonNullable: true })
  };
  
  // File upload
  fileField = new FileFieldDto('Attachments', new FormControl([]), {
    multiple: true,
    accept: 'image/*,application/pdf',
    maxFileSize: 5 * 1024 * 1024,
    maxFiles: 5,
    showPreview: true
  });

  // Table with custom columns and sorting
  employeeTable = new TableFieldDto(
    [
      { key: 'name', label: 'Name', flex: '1', sortable: true },
      { key: 'department', label: 'Department', flex: '0 0 150px', sortable: true },
      { key: 'salary', label: 'Salary', flex: '0 0 120px', sortable: true, cellTemplate: (value) => `$${value?.toLocaleString() || '0'}` }
    ],
    [
      { name: 'John Smith', department: 'Engineering', salary: 75000 },
      { name: 'Sarah Johnson', department: 'Marketing', salary: 65000 }
    ]
  );

  // Paginated table with sorting
  userTable = new TableFieldDto(
    [
      { key: 'name', label: 'Name', flex: '1', sortable: true },
      { key: 'email', label: 'Email', flex: '1', sortable: true },
      { key: 'location.country', label: 'Country', flex: '0 0 120px', sortable: true }
    ],
    [], // Will be populated by API
    true, // Enable pagination
    new PaginatorFieldDto(1, 100, 10) // Page 1, 100 total items, 10 per page
  );
  
  // Handle sort changes
  onTableSort(event: { column: string; direction: 'asc' | 'desc' | null }) {
    this.userTable = { 
      ...this.userTable, 
      sortState: { column: event.column, direction: event.direction }
    };
  }

  // Standalone paginator
  paginator = new PaginatorFieldDto(1, 500, 25);

  // Panel demo state
  basicPanelOpen = signal(false);
  panelResult = signal<unknown | null>(null);
  confirmationActions: LitePanelAction[] = [
    { label: 'Confirm', value: 'confirm', variant: 'danger' },
    { label: 'Cancel', value: null, variant: 'secondary' }
  ];

  openPanel() {
    this.panelResult.set(null);
    this.basicPanelOpen.set(true);
  }

  onPanelClosed(result: unknown | null) {
    this.panelResult.set(result);
    this.basicPanelOpen.set(false);
  }
}

class FieldDto {
  label: string;
  formControl: FormControl;
  rows?: number; // For textarea only
}

abstract class BaseSelectFieldDto<T> {
  label: string;
  options: T[];
  displayWith: (option: T) => string;
}

class SelectFieldDto<T> extends BaseSelectFieldDto<T> {
  formControl: FormControl<T>;
}

class MultiSelectFieldDto<T> extends BaseSelectFieldDto<T> {
  formControl: FormControl<T[]>;
}

interface DateRangeFieldDto extends Omit<FieldDto, 'formControl'> {
  formControl: FormControl<string[]>;
}

class FileFieldDto {
  label: string;
  formControl: FormControl;
  multiple?: boolean; // Allow multiple file selection (default: true)
  accept?: string; // Accepted file types (default: '*/*')
  maxFileSize?: number; // Maximum file size in bytes (default: 10MB)
  maxFiles?: number; // Maximum number of files allowed (default: 10)
  showPreview?: boolean; // Show image previews (default: true)
}

type SortDirection = 'asc' | 'desc' | null;

interface SortState {
  column: string;
  direction: SortDirection;
}

class TableFieldDto<T = any> {
  columns: TableColumn[];
  data: T[];
  showPaginator?: boolean;
  paginatorConfig: PaginatorFieldDto;
  sortState?: SortState;    // Current sort state
}

interface TableColumn {
  key: string;              // Data property key (supports dot notation)
  label: string;            // Column header text
  flex?: string;            // CSS flex property (e.g., '0 0 100px', '1')
  sortable?: boolean;       // Enable sorting for this column
  cellTemplate?: (value: any, row: any) => string; // Custom HTML template
  type?: 'text' | 'menu';   // Optional column type (default: 'text')
  menuItems?: Array<{ label: string; value: string; variant?: 'danger' | 'default' }>; // For 'menu' type columns
}

class PaginatorFieldDto {
  currentPage: number;
  totalItems: number;
  itemsPerPage: number;
}

import { Validators } from '@angular/forms';

// Required field
emailField = new FieldDto(
  'Email',
  new FormControl('', [Validators.required, Validators.email])
);

// Custom validation
passwordField = new FieldDto(
  'Password',
  new FormControl('', [
    Validators.required,
    Validators.minLength(8),
    this.customPasswordValidator
  ])
);