import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class ClipUserProfile1 extends StatefulWidget {
  const ClipUserProfile1({
    Key? key,}) : super(key: key);

  @override
  State<ClipUserProfile1> createState() => _ClipUserProfile1State();
}

class _ClipUserProfile1State extends State<ClipUserProfile1> {
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    Color myColor=Colors.indigo.shade700;
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children:
          [
          CustomPaint(
            painter: _ClipShadowShadowPainter(
              clipper: WaveClipper(),
              shadow: const Shadow(
                  color: Colors.grey,
                  offset: Offset(0, 0),
                  blurRadius: 20),

            ),
            child: ClipPath(clipper: WaveClipper(), child: Container(width: screenSize.width, height: screenSize.height,color: myColor,)),
          ),

            Padding(
              padding: EdgeInsets.only(left: 20,top: screenSize.height*.07),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 200,
                    width: 200,
                    decoration: BoxDecoration(
                      color: Colors.deepPurple,
                      borderRadius: BorderRadius.circular(100),
                      image:  const DecorationImage(
                          image: AssetImage('assets/user.jpg'),fit: BoxFit.cover),
                      border: Border.all(width: 5,color: Colors.white)
                    ),

                  ),
                  Text('James Anderson',style: TextStyle(
                    color: myColor,
                    fontSize: 25,
                    overflow: TextOverflow.ellipsis
                  ),maxLines: 1,),
                  Text('Developer at XYZ Ltd',style: TextStyle(
                      color: myColor,
                      fontSize: 25,
                    overflow: TextOverflow.ellipsis
                  ),maxLines: 1,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(FontAwesomeIcons.facebook,size: 30,color:myColor,),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(FontAwesomeIcons.twitter,size: 30,color: myColor,),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(FontAwesomeIcons.linkedin,size: 30,color: myColor,),
                      ),


                    ],
                  ),
                  const Padding(
                    padding: EdgeInsets.only(right: 30),
                    child: Divider(thickness: 2,),
                  ),
                  Container(
                    margin: const EdgeInsets.only(right: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Column(
                          children: [
                            Text('938',style: TextStyle(color: myColor),),
                            Text('Followers',style: TextStyle(color: myColor))
                          ],
                        ),
                        Column(
                          children: [
                            Text('1023',style: TextStyle(color: myColor)),
                            Text('Following',style: TextStyle(color: myColor))
                          ],
                        ),
                        TextButton(onPressed: (){}, child: Text('Edit Profile',style: TextStyle(
                          color: myColor
                        ),))
                      ],
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(right: 30),
                    child: Divider(thickness: 2,),
                  ),
                  Text('About',style: TextStyle(color: myColor,fontSize: 20),),
                  Container(
                    margin: const EdgeInsets.only(left: 20),
                    child: Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
                      style: TextStyle(color: myColor),
                    ),
                  ),
                  const SizedBox(height: 10,),
                  Row(
                    children: [
                      Container(
                        alignment: Alignment.centerLeft,
                          width: 40,
                          child: Icon(Icons.email,color: myColor,)
                      ),
                      const Text(':'),
                      Container(
                        margin: const EdgeInsets.only(left: 10),
                        child: Text("xyz@xyz.com",
                          style: TextStyle(color: myColor),
                        ),
                      )
                    ],
                  ),
                  const SizedBox(height: 10,),
                  Row(
                    children: [
                      Container(
                          alignment: Alignment.centerLeft,
                          width: 40,
                          child: Icon(Icons.phone,color: myColor,)),
                      const Text(':'),
                      Container(

                        margin: const EdgeInsets.only(left: 10),
                        child: Text("+11111111111",
                          style: TextStyle(color: myColor),
                        ),
                      )
                    ],
                  ),
                  const SizedBox(height: 10,),
                  Row(
                    children: [
                      Container(
                          alignment: Alignment.centerLeft,
                          width: 40,
                          child: Icon(Icons.location_on,color: myColor,)),
                      const Text(':'),
                      Container(

                        margin: const EdgeInsets.only(left: 10),
                        child: Text("00/0, XYZ Road, Dhaka, Bangladesh",
                          style: TextStyle(color: myColor),
                        ),
                      )
                    ],
                  ),

                ],
              ),
            ),

        ]
        ),
      ),
    );
  }
}

class _ClipShadowShadowPainter extends CustomPainter {
  final Shadow shadow;
  final CustomClipper<Path> clipper;

  _ClipShadowShadowPainter({required this.shadow, required this.clipper});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = shadow.toPaint();
    var clipPath = clipper.getClip(size).shift(shadow.offset);
    canvas.drawPath(clipPath, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class WaveClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.lineTo(0, size.height*0.08);
    path.quadraticBezierTo(size.width/9*2.5, size.height*0.13, size.width/9*5, size.height*.07);
    path.quadraticBezierTo(size.width/9*8.3, 0, size.width*.9, size.height*.13);
    path.quadraticBezierTo(size.width/9*8, size.height*.45, size.width,size.height*.5);
    path.lineTo(size.width,0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {

    return true;
  }

}