import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'customer-registration-compose',
  templateUrl: './customer-registration-compose.component.html',

  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*', minHeight: '50px' })),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      ),
    ]),
  ],
})
export class CustomerRegistrationComposeComponent implements OnInit {
  composeForm!: FormGroup;

  dataSource = ELEMENT_DATA;
  columnsToDisplay = ['idx', 'content', 'applicationDate'];
  expandedElement: PeriodicElement | null | undefined;

  /**
   * Constructor
   */
  constructor(
    public matDialogRef: MatDialogRef<CustomerRegistrationComposeComponent>,
    private _formBuilder: FormBuilder
  ) {}

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void {
    // Create the form
    this.composeForm = this._formBuilder.group({
      accountHolder: ['', [Validators.required]],
      amount: ['', [Validators.required]],
    });
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Public methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * Save and close
   */
  saveAndClose(): void {
    // Save the message as a draft
    this.saveAsDraft();

    // Close the dialog
    this.matDialogRef.close();
  }

  /**
   * Discard the message
   */
  discard(): void {}

  /**
   * Save the message as a draft
   */
  saveAsDraft(): void {}

  /**
   * Send the message
   */
  send(): void {}
}

export interface PeriodicElement {
  idx: number;
  content: string;
  applicationDate: string;
  description: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {
    idx: 1,
    content: '계좌등록안내',
    applicationDate: '2022-08-23',
    description: `안녕하세요. 운영진입니다.`,
  },
  {
    idx: 2,
    content: '오토프로그램 이용 안내',
    applicationDate: '2022-08-23',
    description: `하단이미지를 참고해주시기바랍니다`,
  },
  {
    idx: 3,
    content: '입출금 규정 안내',
    applicationDate: '2022-08-23',
    description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
  },
];
