import * as React from 'react';
import {Button, TextField, Grid, Box,
  Typography, Container
} from '@mui/material';
import Title from './title';
import Photo from './photo';
import axios from 'axios';
import student_icon from './student-icon.png';
import "./index.css";
//import useTelegram from "../hooks/useTelegram";
import Select from 'react-select';
import { useState } from 'react';
import { useConstant } from '../Constant';


const SingUpPage = (): React.ReactElement => {
  const [selectedPhoto, setSelectedPhoto] = useState(null);
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handlePhotoChange = (photo) => {
    setSelectedPhoto(photo);
  };

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption);
  };


  const { interests } = useConstant();
  //const { user_id, username, onClose } = useTelegram();
  /*
  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const form = {
      id: user_id,
      name: username,
      fullname: data.get('lname') + ' ' + data.get('fname'),
      about: data.get('about'), // Новое поле "Обо мне"
      photo: image,
      interests: selectedOption?.map((item) => item.value)
    };
    await axios.post("https://sergeymorykov-tg-web-backend-1a6e.twc1.net/users_reg", form);
    //await axios.post("http://localhost:5000/users_reg", form);
    delete form.photo;
    window.Telegram.WebApp.sendData(JSON.stringify(form));
    onClose();
  };
  */

  return (
      <Container component="main" maxWidth="xs">
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Title>Регистрация</Title>
          <Box component="form" noValidate  sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  required
                  fullWidth
                  id="lname"
                  label="Фамилия"
                  name="lname"
                  autoComplete="family-name"
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoComplete="given-name"
                  name="fname"
                  required
                  fullWidth
                  id="fname"
                  label="Имя"
                  autoFocus
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  multiline
                  rows={3}
                  id="about"
                  label="Обо мне"
                  name="about"
                  variant="outlined"
                  placeholder="Напишите о себе"
                />
              </Grid>
              <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justifyContent="center"
                sx={{ paddingTop: 7, paddingLeft: 3 }}
              >
              <Photo defaultPhoto={student_icon} onPhotoChange={handlePhotoChange} />
              </Grid>
              <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justifyContent="center"
                sx={{ paddingTop: 7, ml: 3 }}
              >
                <Select
                  onChange={handleChange}
                  closeMenuOnSelect={false}
                  isMulti
                  options={interests}
                  className="basic-multi-select"
                  classNamePrefix="select"
                />
              </Grid>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2, ml: 3 }}
              >
                Регистрация
              </Button>
            </Grid>
          </Box>
        </Box>
      </Container>
  );
};

export default SingUpPage;