import 'package:firstapp/pages/home_page.dart';
import 'package:firstapp/pages/flight_ticket_page.dart';
import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // กำหนด default page ไว้ที่ index 0 ซึ่งก็คือ HomePage
  int currentIndex = 0;
  // สร้าง List ของ pages สำหรับ drawer
  List pages = [
    HomePage(),
    FlightTicketPage(),
  ];

  @override
  Widget build(BuildContext context) {
    // นี่ไง appBar
    Widget appBar = AppBar(
      // Center นี่ก็เป็น Widget นะเออ
      title: Center(
        // จะกำหนด margin ต้องใช้ Container จำไว้ มีลูกได้แค่ 1 ตัว
        child: Container(
          // margin ใช้ EdgeInserts กำหนดระยะนะจ๊ะ
          margin: EdgeInsets.only(bottom: 10.0, top: 5.0, right: 50.0, left: 0.0),
          // สร้างภาพด้วย Widget Image
          child: Image(
            image: AssetImage('assets/images/logo.png'),
            height: 65.0,
          ),
        ),
      ),
      // กำหนดสีให้ appBar แต่ไม่ต้องใส่ก็ได้ ก็เรากำหนดใน theme แล้วนี่
      backgroundColor: Theme.of(context).primaryColor,
    );

    // ตัวอย่างการสร้าง TextStyle
    TextStyle menuStyle = TextStyle(fontFamily: 'Prompt', fontSize: 20.0, color: Colors.white);

    // นี่เลย drawer หรือเมนูด้านข้างนั้นเอง
    Widget drawer = Drawer(
      // กำหนดสีพื้นหลังให้มันก็ใช้ Container นะง่ายดี
      child: Container(
        color: Theme.of(context).primaryColor,
        // สร้าง List ด้วย ListView มีลูกได้หลายตัว
        child: ListView(
          children: <Widget>[
            // ใช้ ListTile จะได้สวยๆ ประกอบด้วย leading, title, trailing
            ListTile(
              // สร้าง Icon ที่คลิกได้ด้วย IconButton
              trailing: IconButton(
                icon: Icon(
                  // มี Icons ให้ใช้อยู่แล้ว เลือกได้ตามสบาย
                  Icons.dehaze,
                  color: Colors.white,
                ),
                // จะกดปุ่มใช่มั้ยใช้ onPressed สิ กดเสร็จแล้วปิด drawer ด้วย
                onPressed: () => Navigator.pop(context),
              ),
            ),
            ListTile(
              title: Text(
                'หน้าแรก',
                style: menuStyle,
              ),
              onTap: () {
                // เปลี่ยน currentIndex ด้วย setState()
                setState(() {
                  currentIndex = 0;
                });
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text(
                'ตั๋วเครื่องบิน',
                style: menuStyle,
              ),
              onTap: () {
                // เปลี่ยน currentIndex ด้วย setState()
                setState(() {
                  currentIndex = 1;
                });
                Navigator.pop(context);
              },
            ),
            // ต้องการพื้นที่ว่างใช้อันนี้
            SizedBox(height: 30.0)
          ],
        ),
      ),
    );

    // Scaffold ใช้ในการสร้าง appBar, drawer, body
    return Scaffold(
      appBar: appBar,
      drawer: drawer,
      // จะเปลี่ยน body ใช่มั้ย ก็เอา currentIndex มาใช้เลย
      body: pages[currentIndex],
    );
  }
}