import {
  trigger,
  state,
  style,
  transition,
  animate,
} from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { MatDialog } from '@angular/material/dialog';
import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component';

@Component({
  selector: 'customer-compose',
  templateUrl: './customer-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 CustomerComposeComponent implements OnInit {
  composeForm!: FormGroup;

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

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

  // -----------------------------------------------------------------------------------------------------
  // @ 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 {}

  __onClickRegistration(event: MouseEvent): void {
    const dialogRef = this._matDialog.open(
      CustomerRegistrationComposeComponent,
      {
        data: { price: '', memo: '' },
      }
    );
  }
}

export interface PeriodicElement {
  state: string;
  content: string;
  applicationDate: string;
  description: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {
    state: '답변대기중',
    content: '입금계좌문의',
    applicationDate: '2022-08-23',
    description: `입금계좌를 알려달라`,
  },
  {
    state: '답변대기중',
    content: '오토프로그램 이용 안내',
    applicationDate: '2022-08-23',
    description: `하단이미지를 참고해주시기바랍니다`,
  },
  {
    state: '답변대기중',
    content: '입출금 규정 안내',
    applicationDate: '2022-08-23',
    description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
  },
];
