// material-ui
import {
    Button,
    Divider,
    Grid,
    InputLabel,
    Stack,
    TextField
} from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers';

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import axios from 'axios';
import MainCard from 'components/MainCard';

// third-party
import { Form, FormikProvider, useFormik } from 'formik';
import { useState } from 'react';
import * as Yup from 'yup';

// project imports

// assets

// types


// ==============================|| List ||============================== //

const TextTranslate = () => {
    const [showUnityWebGL, setShowUnityWebGL] = useState(false);

    const FormSchema = Yup.object().shape({
        userInputText: Yup.string()
            .required('Field is required')
            .test('is-sinhala', 'Input must be in Sinhala', (value) => {
                // You can use a regular expression or any custom logic to validate Sinhala text.
                // Here's a basic example using a regular expression for Sinhala characters.
                const sinhalaRegex = /^[\u0D80-\u0DFF\s]+$/; // Range for Sinhala Unicode characters

                if (!value) {
                    // If the field is empty, it's valid as it's already being checked by 'required'
                    return true;
                }

                return sinhalaRegex.test(value);
            })
            .max(255, 'Input must be at most 255 characters long'),
    });

    const formik = useFormik({
        initialValues: {
            userInputText: "",
        },
        validationSchema: FormSchema,
        enableReinitialize: true,
        onSubmit: async (values, { setSubmitting, resetForm }) => {
            try {
                // API Call Here
                const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", {
                    userInputText: values.userInputText,
                });

                // Check if the request was successful
                if (response.status === 200) {
                    console.log("Success:", response.data);
                    setShowUnityWebGL(true)
                } else {
                    console.error("Request failed with status code:", response.status);
                }

                resetForm()
                setSubmitting(false);
            } catch (error) {
                console.error(error);
            }
        }
    });

    const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;

    return (
        <>
            <FormikProvider value={formik}>
                <LocalizationProvider dateAdapter={AdapterDateFns}>
                    <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                        <MainCard>
                            <Grid container spacing={3}>
                                <Grid item xs={4} md={4}>
                                    <Grid container spacing={3}>
                                        <Grid item xs={12}>
                                            <Stack spacing={1.25}>
                                                <InputLabel htmlFor="userInputText">Enter Text to Translate</InputLabel>
                                                <TextField
                                                    fullWidth
                                                    id="userInputText"
                                                    placeholder="Enter Text Name"
                                                    {...getFieldProps('userInputText')}
                                                    error={Boolean(touched.userInputText && errors.userInputText)}
                                                    helperText={touched.userInputText && errors.userInputText}
                                                />
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Divider />
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Grid container justifyContent="space-between" alignItems="center">
                                                <Grid item>
                                                </Grid>
                                                <Grid item>
                                                    <Stack direction="row" spacing={2} alignItems="center">
                                                        <Button color="error" onClick={() => { setShowUnityWebGL(false) }}>
                                                            Cancel
                                                        </Button>
                                                        <Button type="submit" variant="contained" disabled={isSubmitting}>
                                                            TRANSLATE
                                                        </Button>
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={8} md={8}>
                                    {showUnityWebGL ? <iframe
                                        // src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/"
                                        src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/"
                                        width="100%"
                                        height="700px" // Adjust the height as needed
                                        title="Unity WebGL"
                                        style={{ border: 'none', overflow: 'hidden' }}
                                    ></iframe> : <>3D model Rendered Here...</>}
                                </Grid>
                            </Grid>
                        </MainCard>
                    </Form>
                </LocalizationProvider>
            </FormikProvider >
        </>
    );
};

export default TextTranslate;