import 'package:cathaypay_mobile/TransferPoint/PointConditionPage.dart';
import 'package:flutter/material.dart';

class PointMenuPage extends StatefulWidget {
  const PointMenuPage({Key? key}) : super(key: key);

  @override
  State<PointMenuPage> createState() => _PointMenuPageState();
}

class _PointMenuPageState extends State<PointMenuPage> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: [
        Row(children: [
          Text(
            "Points to Points",
            style: TextStyle(
              color: Color(0xff050505),
              fontSize: 20,
            ),
          ),
          Spacer(),
          IconButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              icon: Icon(
                Icons.close,
                color: Colors.black,
              )),
        ],),
        SizedBox(width: 10,),
        Text(
          "ธนาคาร",
          style: TextStyle(
            color: Color(0xff050505),
            fontSize: 18,
          ),
        ),
        SizedBox(height: 10,),
       Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
         Expanded(
           child: Container(
               width: 64,
               height: 165,
               decoration: BoxDecoration(
                 boxShadow : [BoxShadow(
                     color: Color.fromRGBO(0, 0, 0, 0.25),
                     offset: Offset(2,2),
                     blurRadius: 4
                 )],
                 color : Color.fromRGBO(251, 251, 251, 1),
               ),
             child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
               Padding(
                 padding: const EdgeInsets.all(10),
                 child: Image(

                   image: AssetImage('images/transferpoint/the1.png'),
                   fit: BoxFit.cover,
                 ),
               ),
               Text(
                 "KTC",
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   color: Color(0xff2d2d2d),
                   fontSize: 16,
                 ),
               )
             ],),
           ),
         ),SizedBox(width: 20,),
         Expanded(
           child: Container(
             width: 64,
             height: 165,
             decoration: BoxDecoration(
               boxShadow : [BoxShadow(
                   color: Color.fromRGBO(0, 0, 0, 0.25),
                   offset: Offset(2,2),
                   blurRadius: 4
               )],
               color : Color.fromRGBO(251, 251, 251, 1),
             ),
             child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
               Padding(
                 padding: const EdgeInsets.all(10),
                 child: Image(

                   image: AssetImage('images/transferpoint/kcc.png'),
                   fit: BoxFit.cover,
                 ),
               ),
               Text(
                 "KCC",
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   color: Color(0xff2d2d2d),
                   fontSize: 16,
                 ),
               )
             ],),
           ),
         )
       ],),
        SizedBox(width: 10,),
        Text(
          "ไลฟ์สไตล์",
          style: TextStyle(
            color: Color(0xff050505),
            fontSize: 18,
          ),
        ),
        SizedBox(height: 10,),
        Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
          Expanded(
            child: InkWell(onTap: (){
              showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,useSafeArea: true,
                  builder: (BuildContext context) {
                    return SafeArea(child: PointConditionPage());
                  });
            },
              child: Container(
                width: 64,
                height: 165,
                decoration: BoxDecoration(
                  boxShadow : [BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.25),
                      offset: Offset(2,2),
                      blurRadius: 4
                  )],
                  color : Color.fromRGBO(251, 251, 251, 1),
                ),
                child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
                  Padding(
                    padding: const EdgeInsets.all(10),
                    child: Image(

                      image: AssetImage('images/transferpoint/mis.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  Text(
                    "MISTINE",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Color(0xff2d2d2d),
                      fontSize: 16,
                    ),
                  )
                ],),
              ),
            ),
          ),SizedBox(width: 20,),
          Expanded(
            child: Container(
              width: 64,
              height: 165,
              decoration: BoxDecoration(
                boxShadow : [BoxShadow(
                    color: Color.fromRGBO(0, 0, 0, 0.25),
                    offset: Offset(2,2),
                    blurRadius: 4
                )],
                color : Color.fromRGBO(251, 251, 251, 1),
              ),
              child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Image(

                    image: AssetImage('images/transferpoint/aot.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                Text(
                  "AOT",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xff2d2d2d),
                    fontSize: 16,
                  ),
                )
              ],),
            ),
          )
        ],)
      ],),
    );
  }
}