import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { Button, Card, Carousel, Col, Divider, Form, Input, Row } from "antd";
import { Header } from "antd/es/layout/layout";
import { useNavigate } from 'react-router-dom';
import apeepic from "../../../images/APEE Pic.png";
import downloadicon from "../../../images/Downlodeicon.png";
import supporticon from "../../../images/Support-icon.png";
import videoiconnew from "../../../images/Videoiconnew.png";
import WhatsappIcon from "../../../images/Whatsappicon.png";
import SchemaxLog from "../../../images/X Logo 2.png";
import { loginUser, useAuthState } from '../auth-context';
import './new-login-component.css';
import Kutami from './login-images/login.jpg'

const NewLoginComponent = () => {
    const { dispatch } = useAuthState();
    const navigate = useNavigate();

    const handleLogin = async (values: any) => {
        try {
            let response = await loginUser(dispatch, values)
            const savedItem = localStorage.getItem("currentUser");
            const parsedItem = JSON.parse(savedItem || "{}");
            const loginType = parsedItem?.user?.loginType || "";
            if (response.user) {
                if (loginType === 'registerer') {
                    navigate('/signup', { replace: true });
                } else {
                    navigate('/dashboard', { replace: true });
                }
                window.location.reload();
            }

        } catch (error) {
            console.log(error)
        }
    };

    const ProductsCards = [
        {
            title: 'Warehouse Mangemennt',
            image: Kutami,
            description: 'To efficiently manage and organize raw materials inventory to ensure timely availability for production while minimizing storage costs and waste.'
        },
    ]

    const contentStyle: React.CSSProperties = {
        height: '86vh',
        color: '#fff',
        textAlign: 'center',
    };
    return (
        <div style={{ height: '100vh', overflowY: 'hidden' }}>
            <Header style={{ padding: '10px', background: 'black', border: '1px solid gray', height: "65px" }}>
                <Row >
                    <Col xs={8} sm={8} md={8} lg={8} xl={8} style={{ color: 'white', marginTop: "10px" }}>
                        <h1 style={{ color: 'white', marginTop: '-15px' }}>APEE</h1>
                    </Col>
                    <Col xs={8} sm={8} md={8} lg={8} xl={8} style={{ display: 'flex', justifyContent: 'center', marginTop: '-10px' }}>
                        <img src={SchemaxLog} alt="/" style={{ height: "57px" }} />
                    </Col>
                    <Col xs={8} sm={8} md={8} lg={8} xl={8} style={{ display: 'flex', justifyContent: 'end' }}>
                        <a href="tel:+917993874018" >
                            <img src={supporticon} style={{ fontSize: '54px', height: "65px", marginLeft: '20px', cursor: 'pointer', paddingBottom: "24px" }} /></a>
                        <img src={videoiconnew} alt="/" style={{ fontSize: '24px', height: "59px", paddingBottom: "24px", marginLeft: '20px', cursor: 'pointer', marginTop: '7px' }} />
                        <img
                            // onClick={downloadFile}
                            src={downloadicon}
                            alt="/" style={{ fontSize: '24px', height: "59px", paddingBottom: "24px", marginLeft: '20px', cursor: 'pointer', marginTop: '7px' }}
                        />
                        <a aria-label="Chat on WhatsApp" target="_blank" href="https://wa.me/919014375798?text=Hi%20there%21%20I%27m%20reaching%20out%20for%20some%20help.%20Can%20you%20assist%20me%20%3F">
                            <img alt="Chat on WhatsApp" src={WhatsappIcon} style={{ color: "white", fontSize: '24px', height: "65px", paddingBottom: "24px", marginLeft: '20px', cursor: 'pointer' }} />
                        </a>
                    </Col>
                </Row>
            </Header>
            {/* <Card> */}
            <Row>
                <Col xs={{ span: 24, order: 2 }} sm={{ span: 24, order: 2 }} md={{ span: 16, order: 1 }} lg={{ span: 18, order: 1 }}>
                    <Card style={{ background: 'white', height: '100%', }}
                        bodyStyle={{ padding: "0px" }}
                    >
                        <Carousel
                            arrows={true}
                            className="login-c"
                            autoplay
                            slidesToShow={1} speed={500}>
                            {ProductsCards.map((card, key) => {
                                return <div >
                                    <p style={contentStyle}>
                                        <div key={key}
                                        >
                                            <div className="flip-container">
                                                <div className="flipper">
                                                    <div className="front">
                                                        <div>
                                                            <img style={{
                                                                height: '100vh',
                                                                width: '100%',
                                                                top: '0', marginTop: "-20px"
                                                            }} className="mb-2" src={card.image} />
                                                        </div>
                                                    </div>
                                                    <div className="back">
                                                        <Col className="justify-center">
                                                            <h3 className="">
                                                                {card.title}
                                                            </h3>
                                                            <p className="description" style={{ color: "black" }}>
                                                                {card.description}
                                                            </p>
                                                        </Col>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </p>
                                </div>
                            })}
                        </Carousel>

                    </Card>
                </Col>
                <Col xs={{ span: 24, order: 1 }} sm={{ span: 24, order: 1 }} md={{ span: 8, order: 2 }} lg={{ span: 6, order: 2 }}
                    style={{ display: 'flex', justifyContent: 'center' }}>
                    <Card style={{
                        display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', fontFamily: 'cursive',
                        background: 'black',
                        boxShadow: 'none',
                        borderRadius: 0,
                        border: 'none'
                    }}>

                        <Card className="glass" style={{
                            textAlign: 'center', background: 'black', fontFamily: 'sans-serif',
                            border: 'none', width: "300px", height: "650px",
                        }}>
                            <Row style={{ display: 'flex', justifyContent: 'center', marginTop: '4.4rem' }}>
                                <img src={apeepic} alt="/"
                                    style={{
                                        width: "45%",
                                    }} />
                            </Row>
                            <Row style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}>
                                {/* <img src={assetname} alt="/" style={{
                                    height: "2.5rem",
                                    marginBottom: '10px'
                                }} /> */}
                            </Row>
                            <div className="logo">


                                <Form
                                    name="normal_login"
                                    className="container"
                                    onFinish={handleLogin}
                                    initialValues={{
                                        remember: true,
                                    }}>
                                    <Col span={24}>
                                        <Form.Item
                                            name='username'
                                            rules={[
                                                {
                                                    required: true,
                                                    message: 'Please input your Username!',
                                                },
                                            ]}>
                                            <Input placeholder="Username"
                                                className="custom-placeholder"
                                                style={{
                                                    background: '#000', border: 'none', width: "260px", height: "40px", color: 'white', boxShadow: '0 0 10px #822bff'
                                                }}
                                                autoComplete="new-username"

                                            />
                                        </Form.Item>
                                    </Col>
                                    <Col span={24}>
                                        <Form.Item name='password' rules={[{ required: true, message: 'Please input your password!' }]}>
                                            <Input.Password
                                                // className="custom-placeholder"
                                                className="custom-password-input"
                                                placeholder="Password"
                                                iconRender={visible => (visible ? <EyeOutlined style={{ color: 'white' }} /> : <EyeInvisibleOutlined style={{ color: 'white' }} />)}
                                                style={{
                                                    background: '#000', border: 'none', width: "260px", height: "40px", color: 'white', boxShadow: '0 0 10px #822bff',

                                                }}
                                                autoComplete="new-password"
                                            />
                                        </Form.Item>
                                    </Col>

                                    <Col span={24}>
                                        <Col span={24}>
                                            <Button
                                                type="primary" htmlType="submit"
                                                style={{
                                                    textSizeAdjust: '50',
                                                    backgroundColor: '#7a6bcc',
                                                    width: "260px", color: '#FFFFFF',
                                                    height: "40px", fontSize: '18px',
                                                    border: "black",
                                                    fontFamily: "calibri",
                                                    fontWeight: 'bold',
                                                    boxShadow: '#A46BF5 -4px 15px 40px -8px',
                                                    letterSpacing: '1px',
                                                }}>Login</Button>
                                        </Col>
                                        <br />
                                        {/* <Col span={24}> <a href='#/signup'>
                                            <Button
                                                style={{
                                                    textSizeAdjust: '50',
                                                    backgroundColor: '#7a6bcc',
                                                    width: "260px", color: '#FFFFFF',
                                                    height: "40px", fontSize: '18px',
                                                    border: "black",
                                                    fontFamily: "calibri",
                                                    fontWeight: 'bold',
                                                    boxShadow: '#A46BF5 -4px 15px 40px -8px',
                                                    letterSpacing: '1px',
                                                }}>SignUp</Button>
                                        </a> </Col> */}
                                    </Col>
                                </Form>
                            </div>
                        </Card>
                        <div style={{
                            position: 'absolute',
                            bottom: '0px',
                            right: '2px',
                            color: 'white',
                            fontSize: '10px',
                            display: 'flex',
                            flexDirection: 'column',
                        }}>
                            <Divider style={{ color: '#ffff', marginBottom: "-1px", }}>Powered by @SchemaxTech</Divider>
                            <span style={{
                                alignSelf: 'flex-start', fontSize: '15px',
                                fontWeight: 700,
                                marginLeft: '0rem'
                            }}></span>
                        </div>


                    </Card>
                </Col>
            </Row>
            {/* </Card > */}
        </div>
    )
};
export default NewLoginComponent;