import { useEffect, useState } from 'react';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';

// third-party
// import { PatternFormat } from 'react-number-format';

// project import
import Avatar from 'components/@extended/Avatar';
import MainCard from 'components/MainCard';
import {
  // facebookColor, linkedInColor, twitterColor
  ThemeMode
} from 'config';
import axios from 'axios';
// assets
import {
  // FacebookFilled, LinkedinFilled, TwitterSquareFilled,
  CameraOutlined
} from '@ant-design/icons';
import { usePlacesWidget } from 'react-google-autocomplete';
import Loader from 'components/Loader';
import Geocode from 'react-geocode';
import { enqueueSnackbar } from 'notistack';
import { useNavigate } from 'react-router';
// import { setLocationType } from 'react-geocode';

// const avatarImage = require.context('assets/images/users', true);

// styles & constant
// const ITEM_HEIGHT = 48;
// const ITEM_PADDING_TOP = 8;
// const MenuProps = {
//     PaperProps: {
//         style: {
//             maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP
//         }
//     }
// };

const CreateCustomer = () => {
  const theme = useTheme();
  const [selectedImage, setSelectedImage] = useState(undefined);
  const [avatar, setAvatar] = useState();
  // avatarImage(`./default.png`)
  const [businessname, setBusinessname] = useState('');
  const [businessno, setBusinessno] = useState('');
  // const [role, setRole] = useState('');
  const [mobilenumber, setMobilenumber] = useState('');
  const [emailaddress, setEmailaddress] = useState('');
  const [city, setCity] = useState('');
  const [zipcode, setZipcode] = useState('');
  const [address, setAddress] = useState('');
  const [state, setState] = useState('');
  const [suburb, setSuburb] = useState('');
  const [latlong, setLatlong] = useState({});
  const [profiledetails, setProfiledetails] = useState({});
  const [primarycontact, setPrimarycontact] = useState('');
  const [firstname, setFirstname] = useState('');
  const [doorno, setDoorno] = useState('');
  const [landmark, setLandmark] = useState('');
  const [tenantinfo, setTenantinfo] = useState({});

  const navigate = useNavigate();

  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
  // Geocode.setApiKey('AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8');

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    //  fetchprofiledetails(localStorage.getItem('appuserid'));
    // fetchprofiledetails(181);
    if (localStorage.getItem('tenantid')) {
      fetchtenantinfo(localStorage.getItem('tenantid'));
    }
  }, []);

  useEffect(() => {
    try {
      Geocode.fromAddress(address).then(
        (response) => {
          if (response.status == 'OK') {
            const { lat, lng } = response.results[0].geometry.location;
            setLatlong({
              lat,
              lng
            });
            console.log(response);
          }
        },
        (error) => {
          console.log(error);
        }
      );
    } catch (err) {
      console.log(err);
    }
  }, [address]);

  const opentoast = (message) => {
    enqueueSnackbar(message, {
      variant: 'error',
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
      autoHideDuration: 2000
    });
    // console.log(alertmessage)
  };

  const fetchprofiledetails = async (userid) => {
    if (userid) {
      setLoading(true);
      try {
        await axios
          .get(`${process.env.REACT_APP_URL2}/tenants/getclient?id=${userid}`)
          .then((res) => {
            console.log(res);
            if (res.data.message === 'Successful') {
              let res1 = res.data.details;
              setProfiledetails(res1);
              setBusinessname(res1.tenantname);
              setBusinessno(res1.registrationno);
              setMobilenumber(res1.contactno);
              setPrimarycontact(res1.primarycontact);
              setEmailaddress(res1.primaryemail);
              setAddress(res1.address);
              setCity(res1.city);
              setZipcode(res1.postcode);
              setState(res1.state);
              setSuburb(res1.suburb);
              setLatlong({
                lat: res1.latitude,
                lng: res1.longitude
              });
            }
            setLoading(false);
          })
          .catch((err) => {
            console.log(err);
            setLoading(false);
          });
      } catch (err) {
        console.log(err);
        setLoading(false);
      }
    }
  };

  const fetchtenantinfo = async (tid) => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
      .then((res) => {
        console.log('fetchtenantinfo', res.data.details);
        if (res.data.status) {
          setTenantinfo(res.data.details);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };

  useEffect(() => {
    if (selectedImage) {
      setAvatar(URL.createObjectURL(selectedImage));
    }
  }, [selectedImage]);

  const { ref: materialRef } = usePlacesWidget({
    apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    onPlaceSelected: (place) => {
      console.log(place);

      setAddress(place.formatted_address);
      let city1, zipcode1, state1, suburb1;
      for (let i = 0; i < place.address_components.length; i++) {
        for (let j = 0; j < place.address_components[i].types.length; j++) {
          switch (place.address_components[i].types[j]) {
            case 'locality':
              city1 = place.address_components[i].long_name;
              break;
            case 'administrative_area_level_1':
              state1 = place.address_components[i].long_name;
              break;
            case 'postal_code':
              zipcode1 = place.address_components[i].long_name;
              break;
            case 'sublocality':
              suburb1 = place.address_components[i].long_name;
              break;
          }
        }
      }
      setCity(city1 || '');
      setState(state1 || '');
      setZipcode(zipcode1 || '');
      setSuburb(suburb1 || '');

      // setAddress(place.formatted_address)
    },
    // inputAutocompleteValue: "country",
    options: {
      // componentRestrictions: 'us',
      // types: ["establishment"]
      types: ['address' || 'geocode']
    }
  });

  const createprofile = async () => {
    console.log('res', businessname, businessno, mobilenumber, emailaddress, address, city, zipcode);

    // if (!businessname) {
    //     opentoast('Fill Business name')
    // } else if (!businessno) {
    //     opentoast('Fill Registration No')
    // }
    //  else
    if (!firstname) {
      opentoast('Fill Full name');
    } else if (!mobilenumber) {
      opentoast('Fill Mobile Number');
    }
    //  else if (!emailaddress) {
    //     opentoast('Fill emailaddress')
    // }
    else if (!address) {
      opentoast('Fill Address');
    } else if (!city) {
      opentoast('Fill City');
    } else if (!zipcode) {
      opentoast('Fill post code');
    } else if (!suburb) {
      opentoast('Fill suburb');
    }
    // else if (!emailaddress) {
    //     opentoast('Fill emailaddress')
    // }
    else if (!latlong.lat || !latlong.lng) {
      opentoast('Choose valid address');
    } else {
      let obj = {
        customerid: 0,
        configid: 1,
        firstname: firstname,
        applocationid: tenantinfo.applolcationid,
        profileimage: '',
        dialcode: '+91',
        contactno: mobilenumber,
        devicetype: '',
        deviceid: '',
        customertoken: '',
        address: address,
        suburb: suburb,
        city: city,
        state: state,
        postcode: zipcode,
        landmark: landmark,
        doorno: doorno,
        latitude: latlong.lat.toString(),
        longitude: latlong.lng.toString(),
        tenantid: parseInt(localStorage.getItem('tenantid')),
        email: emailaddress,
        primaryaddress: 1
      };

      console.log(obj);

      setLoading(true);
      try {
        await axios
          .post(`${process.env.REACT_APP_URL}/customers/create`, obj)
          .then((res) => {
            console.log(res);
            if (res.data.status) {
              enqueueSnackbar(' Created Successfully ', {
                variant: 'success',
                anchorOrigin: { vertical: 'top', horizontal: 'right' },
                autoHideDuration: 2000
              });
              navigate('/customers');
              // setTimeout(()=>{
              //     fetchprofiledetails(localStorage.getItem('appuserid'));

              // },2000)
            } else if (res.data.message == 'Customer Already available') {
              enqueueSnackbar('Customer Already available', {
                variant: 'error',
                anchorOrigin: { vertical: 'top', horizontal: 'right' },
                autoHideDuration: 2000
              });
            }
            setLoading(false);
          })
          .catch((err) => {
            console.log(err);

            setLoading(false);
            enqueueSnackbar(err.message, {
              variant: 'error',
              anchorOrigin: { vertical: 'top', horizontal: 'right' },
              autoHideDuration: 2000
            });
          });
      } catch (err) {
        console.log(err);
        setLoading(false);
      }
    }
  };

  // const [experience, setExperience] = useState('0');

  // const handleChange = (event) => {
  //     setExperience(event.target.value);
  // };
  return (
    <>
      {loading && <Loader />}

      <Grid item xs={12} sx={{ mb: 2 }}>
        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Typography variant="h3">Create Customer</Typography>
        </Stack>
      </Grid>
      <MainCard>
        <Grid container spacing={3}>
          {/* <Grid item xs={12} sm={4} >
                    <MainCard title="Personal Information" sx={{ height: '100%' }}>
                        <Grid container spacing={3}>
                            <Grid item xs={12}>
                                <Stack spacing={2.5} alignItems="center" sx={{ m: 3 }}>
                                    <FormLabel
                                        htmlFor="change-avtar"
                                        sx={{
                                            position: 'relative',
                                            borderRadius: '50%',
                                            overflow: 'hidden',
                                            '&:hover .MuiBox-root': { opacity: 1 },
                                            cursor: 'pointer'
                                        }}
                                    >
                                        <Avatar alt="Avatar 1"
                                            src={avatar}
                                            sx={{ width: 76, height: 76 }} />
                                        <Box
                                            sx={{
                                                position: 'absolute',
                                                top: 0,
                                                left: 0,
                                                backgroundColor: theme.palette.mode === ThemeMode.DARK ? 'rgba(255, 255, 255, .75)' : 'rgba(0,0,0,.65)',
                                                width: '100%',
                                                height: '100%',
                                                opacity: 0,
                                                display: 'flex',
                                                alignItems: 'center',
                                                justifyContent: 'center'
                                            }}
                                        >
                                            <Stack spacing={0.5} alignItems="center">
                                                <CameraOutlined style={{ color: theme.palette.secondary.lighter, fontSize: '1.5rem' }} />
                                                <Typography sx={{ color: 'secondary.lighter' }} variant="caption">
                                                    Upload
                                                </Typography>
                                            </Stack>
                                        </Box>
                                    </FormLabel>
                                    <TextField

                                        type="file"
                                        accept="image/*"
                                        id="change-avtar"
                                        placeholder="Outlined"
                                        variant="outlined"
                                        sx={{ display: 'none' }}
                                        onChange={(e) => setSelectedImage(e.target.files?.[0])}
                                    />

                                </Stack>
                            </Grid>


                            <Grid item xs={12}
                            >

                            </Grid>
                            <Grid item xs={12}
                            >

                            </Grid>
                            <Grid item xs={12}
                            >

                            </Grid>

                            <Grid item xs={12}

                            >
                                <Stack spacing={1.25}>
                                    <InputLabel htmlFor="personal-role-name">Role</InputLabel>
                                    <TextField fullWidth

                                        id="personal-role-name" placeholder="Role Name" autoFocus
                                        onChange={(e) => setRole(e.target.value)}
                                        value={role}
                                        autoComplete='off'

                                    />
                                </Stack>
                            </Grid>

                        </Grid>
                    </MainCard>
                </Grid> */}
          <Grid
            item
            xs={12}
            //  sm={8}
          >
            <MainCard
              // title="Contact Information"
              sx={{ height: '100%' }}
            >
              <Grid container spacing={3}>
                {/* <Grid item xs={12} sm={6}>
                                <Stack spacing={1.25}>
                                    <InputLabel htmlFor="personal-first-name">Business Name</InputLabel>
                                    <TextField fullWidth
                                        id="personal-first-name" placeholder="Business Name" autoFocus
                                        onChange={(e) => setBusinessname(e.target.value)}
                                        value={businessname}
                                        autoComplete='off'
                                    />
                                </Stack>
                            </Grid>
                            <Grid item xs={12} sm={6}>
                                <Stack spacing={1.25}>
                                    <InputLabel htmlFor="personal-last-name">Registration No</InputLabel>
                                    <TextField fullWidth
                                        id="personal-last-name" placeholder="Registration No"
                                        onChange={(e) => setBusinessno(e.target.value)}
                                        value={businessno}
                                        autoComplete='off'

                                    />
                                </Stack>
                            </Grid> */}
                <Grid item xs={12}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-last-name">Name</InputLabel>
                    <TextField
                      fullWidth
                      id="personal-last-name"
                      placeholder="Name"
                      onChange={(e) => setFirstname(e.target.value)}
                      value={firstname}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                {/* <Grid item xs={12} sm={6}>
                            </Grid> */}
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-phone">Phone Number</InputLabel>
                    <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
                      <Select defaultValue="+1" disabled sx={{ cursor: 'not-allowed' }}>
                        <MenuItem value="+1">+91</MenuItem>
                      </Select>
                      <TextField
                        type="number"
                        id="personal-phone"
                        // format="##########"
                        // mask="_"
                        fullWidth
                        // customInput={TextField}
                        placeholder="Phone Number"
                        // defaultValue="8654239581"
                        // onBlur={() => { }}
                        onChange={(e) => {
                          if (e.target.value.toString().length <= 10) {
                            setMobilenumber(e.target.value);
                          }
                        }}
                        value={mobilenumber}
                        autoComplete="off"
                        // disabled
                        sx={{ cursor: 'not-allowed' }}
                      />
                    </Stack>
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-email">Email Address</InputLabel>
                    <TextField
                      type="email"
                      fullWidth
                      // defaultValue="stebin.ben@gmail.com"
                      id="personal-email"
                      placeholder="Email Address"
                      onChange={(e) => setEmailaddress(e.target.value)}
                      value={emailaddress}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-address">Address</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="Street 110-B Kalians Bag, Dewan, M.P. New York"
                      id="personal-address"
                      placeholder="Address"
                      value={address}
                      onChange={(e) => setAddress(e.target.value)}
                      inputRef={materialRef}
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">Location</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Location"
                      onChange={(e) => setSuburb(e.target.value)}
                      value={suburb}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-zipcode">City</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="956754"
                      // type='number'
                      id="personal-zipcode"
                      placeholder="City"
                      onChange={(e) => setCity(e.target.value)}
                      value={city}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">State</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="State"
                      onChange={(e) => setState(e.target.value)}
                      value={state}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-zipcode">Post Code</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="956754"
                      type="number"
                      id="personal-zipcode"
                      placeholder="Zipcode"
                      onChange={(e) => setZipcode(e.target.value)}
                      value={zipcode}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">Door No</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Door No"
                      onChange={(e) => setDoorno(e.target.value)}
                      value={doorno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-email">Landmark</InputLabel>
                    <TextField
                      type="email"
                      fullWidth
                      // defaultValue="stebin.ben@gmail.com"
                      id="personal-email"
                      placeholder="Landmark"
                      onChange={(e) => setLandmark(e.target.value)}
                      value={landmark}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
              </Grid>
            </MainCard>
          </Grid>
          <Grid item xs={12}>
            <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
              <Button
                variant="contained"
                onClick={() => {
                  if (firstname === '') {
                    opentoast('Enter Name');
                  } else if (mobilenumber === '') {
                    opentoast('Enter Mobile Number ');
                  } else if (address === '') {
                    opentoast('Enter Address ');
                  } else if (city === '') {
                    opentoast('Enter City ');
                  } else if (state === '') {
                    opentoast('Enter State ');
                  } else if (suburb === '') {
                    opentoast('Enter location ');
                  } else if (zipcode === '') {
                    opentoast('Enter Post Code ');
                  } else if (landmark === '') {
                    opentoast('Enter Land Mark ');
                  } else if (latlong.lat === '') {
                    opentoast('Invalid latitude ');
                  } else if (latlong.lng === '') {
                    opentoast('Invaiid Longitude ');
                  } else {
                    createprofile();
                  }
                }}
              >
                Create
              </Button>
            </Stack>
          </Grid>
        </Grid>
      </MainCard>
    </>
  );
};

export default CreateCustomer;