import { FormStructure } from 'mat-dynamic-form';

const formStructure = new FormStructure();
formStructure.appearance = 'outline'; // 'fill', 'outline', or 'standard'

formStructure.nodeGrid = 2; // 2 columns (default)

new TextArea('comments', 'Comments').apply({
  singleLine: true,  // Takes full width
  maxCharCount: 100
})

formStructure.nodeGrid = 2;
formStructure.nodes = [
  new Input('firstName', 'First Name'),
  new Input('lastName', 'Last Name'),
  
  // Email needs more space for visibility
  new Input('email', 'Email Address').apply({
    singleLine: true
  }),
  
  new Input('city', 'City'),
  new Input('zipCode', 'ZIP Code'),
  
  // Agreements typically need full width
  new Checkbox('terms', 'I agree to the Terms and Conditions...').apply({
    singleLine: true,
    validator: Validators.requiredTrue
  })
];

import { Input, InputPassword, DatePicker } from 'mat-dynamic-form';

new Input('name', 'Name').apply({
  icon: 'person'
}),
new Input('email', 'Email').apply({
  icon: 'email'
}),
new Input('phone', 'Phone Number').apply({
  icon: 'phone'
}),
new InputPassword('password', 'Password').apply({
  icon: 'lock'
}),
new DatePicker('birthdate', 'Birth Date').apply({
  icon: 'cake'
})

import { Button } from 'mat-dynamic-form';

// Primary action (blue)
new Button('save', 'Save', {
  onEvent: (param) => this.save(param),
  style: 'primary'
}).apply({
  icon: 'save'
})

// Warning/destructive action (red)
new Button('delete', 'Delete', {
  onEvent: (param) => this.delete(param),
  style: 'warn'
}).apply({
  icon: 'delete'
})

// Secondary action (default)
new Button('cancel', 'Cancel', {
  onEvent: (param) => this.cancel(param),
  style: 'secondary'
}).apply({
  icon: 'close'
})

// Accent color
new Button('help', 'Help', {
  onEvent: (param) => this.showHelp(param),
  style: 'accent'
}).apply({
  icon: 'help'
})

formStructure.validateActions = [
  new Button('delete', 'Delete', { style: 'warn' }),
  new Button('cancel', 'Cancel', { style: 'secondary' }),
  new Button('preview', 'Preview', { style: 'accent' }),
  new Button('save', 'Save', { style: 'primary' })
];

formStructure.title = 'User Registration';
formStructure.showTitle = true; // or false to hide

formStructure.maxParentHeight = '80vh';  // Maximum form height
formStructure.onlyScrollContent = true;   // Only scroll form content, not actions

const formStructure = new FormStructure();
formStructure.title = 'Long Form';
formStructure.maxParentHeight = '600px';  // Limit height
formStructure.onlyScrollContent = true;   // Keep buttons visible while scrolling

// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  formStructure: FormStructure;
}

// app.component.scss

// Target the form container
::ng-deep mat-dynamic-form {
  .form-container {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
  }
}

// Style specific field types
::ng-deep mat-form-field {
  &.mat-form-field-appearance-outline {
    .mat-form-field-outline {
      color: #3f51b5;
    }
  }
}

// Customize button spacing
::ng-deep .validate-actions {
  gap: 12px;
  margin-top: 24px;
}

// styles.scss
@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

@include mat.all-component-themes($my-theme);

// Target a specific field by ID
::ng-deep #email {
  .mat-form-field-wrapper {
    padding-bottom: 0;
  }
}

// Style all required fields
::ng-deep mat-form-field.mat-form-field-required {
  .mat-form-field-label {
    color: #d32f2f;
  }
}

// Hint text
new Input('username', 'Username').apply({
  hint: 'Must be at least 3 characters',
  validator: Validators.minLength(3)
})

// Error message
new Input('email', 'Email Address').apply({
  hint: 'We will never share your email',
  errorMessage: 'Please enter a valid email address',
  validator: [Validators.required, Validators.email]
})

// Desktop: 3 columns, Tablet: 2 columns, Mobile: 1 column
// Implement using CSS media queries

export class ResponsiveFormComponent implements OnInit {
  formStructure: FormStructure;

  ngOnInit() {
    this.formStructure = new FormStructure();
    
    // Adjust grid based on screen size
    if (window.innerWidth > 1200) {
      this.formStructure.nodeGrid = 3;
    } else if (window.innerWidth > 768) {
      this.formStructure.nodeGrid = 2;
    } else {
      this.formStructure.nodeGrid = 1;
    }
    
    // Listen for resize
    window.addEventListener('resize', () => this.updateGrid());
  }
  
  updateGrid() {
    if (window.innerWidth > 1200) {
      this.formStructure.nodeGrid = 3;
    } else if (window.innerWidth > 768) {
      this.formStructure.nodeGrid = 2;
    } else {
      this.formStructure.nodeGrid = 1;
    }
  }
}

// Disabled field
new Input('readonly', 'Read-only Field').apply({
  disabled: true,
  value: 'Cannot be edited'
})

// Conditionally disable
const emailField = new Input('email', 'Email Address').apply({
  disabled: !this.allowEmailEdit
});