import 'package:flutter/material.dart';
import 'package:fun_selfie_app/widgets/home_button.dart';

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

  @override
  State<StatefulWidget> createState() => _PhotographyPageState();
}

class _PhotographyPageState extends State<PhotographyPage> {
  Widget renderImgBox(String imgSrc) {
    final screenSize = MediaQuery.of(context).size;
    return Container(
      padding: const EdgeInsets.only(left: 20),
      constraints: BoxConstraints(
          maxHeight: screenSize.height * 0.3, maxWidth: screenSize.width / 4),
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(
              color: Colors.black38,
              offset: Offset(0, 2),
              blurRadius: 5,
              spreadRadius: 3)
        ],
      ),
      child: Image(
        image: AssetImage(imgSrc),
        fit: BoxFit.fill,
        width: (screenSize.width - 100) / 4,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
        body: Container(
      width: screenSize.width,
      height: screenSize.height,
      decoration: const BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage('static/images/photography_bg.png'))),
      child: Stack(children: <Widget>[
        Align(
            alignment: const Alignment(0, 0),
            child: SizedBox(
                width: 180,
                height: 60,
                child: ElevatedButton(
                  child: const Text(
                    '开始拍摄',
                    style: TextStyle(fontSize: 20),
                  ),
                  onPressed: () {
                    Navigator.pushNamed(context, "/takePhoto");
                  },
                ))),
        const HomeButton(),
        Positioned(
            bottom: 0,
            left: 0,
            width: screenSize.width,
            // height: 200,
            child: Row(
              children: [
                renderImgBox('static/images/photo_img3.png'),
                renderImgBox('static/images/photo_img1.png'),
                renderImgBox('static/images/photo_img2.png'),
                renderImgBox('static/images/photo_img3.png'),
              ],
            ))
      ]),
    ));
  }
}