import {Component, EventEmitter, inject, OnInit, Output} from '@angular/core';
import {TranslatePipe} from '@ngx-translate/core';
import {TUI_BREAKPOINT, TuiButton, TuiButtonX, TuiIcon} from '@taiga-ui/core';
import {Security} from './security/security';

@Component({
  selector: 'user-settings',
  imports: [
    TranslatePipe,
    TuiIcon,
    TuiButtonX,
    TuiButton,
    Security
  ],
  templateUrl: './user-settings.html',
  styleUrl: './user-settings.scss',
})
export class UserSettings implements OnInit {
  breakpoint = inject(TUI_BREAKPOINT)

  @Output() close = new EventEmitter<void>()

  selectedOption = "security"
  options = [
    {
      icon: "shield",
      name: "security",
      implemented: true,
    },
    {
      icon: "users",
      name: "profile",
      implemented: false,
    },
    {
      icon: "paint-roller",
      name: "themes",
      implemented: false,
    },
    {
      icon: "computer",
      name: "sessions",
      implemented: false,
    },
    {
      icon: "hard-drive",
      name: "storage",
      implemented: false,
    }
  ]

  ngOnInit() {
    if (this.breakpoint() != "desktopLarge") {
      this.selectedOption = ""
    }
  }
}
