import React from "react";
import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import IconButton from "@mui/material/IconButton";
import {
  DialogTitleBox,
  MessagesHeader,
  DialogTxt,
  ImgBox1,
  WelcomeTxt,
  DialogContentBox,
  WelcomeTxt1,
  TextFieldName,
  ChatButton,
  ButtonName,
  SingUpTxt,
  UPTxt,
  FooterDilogBox,
  FooterImg,
  FooterTxt,
  InputBox1,
} from "../style";

import Dialog from "@mui/material/Dialog";

interface SignInProps {
  handlePopupClose: () => void; // Callback function to close the popup
  isSignInPopupOpen: boolean; // Boolean value for popup
}

const SignIn = (props: SignInProps) => {
  const { handlePopupClose, isSignInPopupOpen } = props;
  return (
    <>
      <React.Fragment>
        <Dialog
          open={isSignInPopupOpen}
          onClose={handlePopupClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitleBox>
            <IconButton
              aria-label="close"
              onClick={handlePopupClose}
              sx={{
                position: "absolute",
                right: 8,
                top: 8,
                color: (theme) => theme.palette.grey[500],
              }}
            >
              <CancelOutlinedIcon />
            </IconButton>
            <MessagesHeader>
              <DialogTxt>messages</DialogTxt>
              <ImgBox1>
                <img src="/assets/chat/logpc1.jpg" alt="" />
              </ImgBox1>
            </MessagesHeader>
            <DialogContentBox>
              <WelcomeTxt>Welcome to Power Cozmo!</WelcomeTxt>
              <WelcomeTxt1>
                If you are a new user please provide below information to create
                an account.
              </WelcomeTxt1>
              <InputBox1>
                <TextFieldName
                  fullWidth
                  size="small"
                  id="outlined-basic"
                  label="Name"
                  variant="outlined"
                />
                <TextFieldName
                  fullWidth
                  size="small"
                  id="outlined-basic"
                  label="E-mail"
                  variant="outlined"
                />
                <TextFieldName
                  fullWidth
                  size="small"
                  id="outlined-basic"
                  label="Password"
                  variant="outlined"
                />
              </InputBox1>
              <ChatButton>
                <ButtonName>start chat</ButtonName>
              </ChatButton>
              <SingUpTxt>
                Don't have an account?<UPTxt>Sing Up</UPTxt>
              </SingUpTxt>
            </DialogContentBox>
            <FooterDilogBox>
              Powered by{" "}
              <FooterImg>
                <img
                  src="/assets/chat/logpc1.jpg"
                  alt=""
                  width="14px"
                  height="13px"
                />
              </FooterImg>
              <FooterTxt>Power Cozmo</FooterTxt>
            </FooterDilogBox>
          </DialogTitleBox>
        </Dialog>
      </React.Fragment>
    </>
  );
};

export default SignIn;