import React, { useState } from "react";
import {
  Box,
  Button,
  TextField,
  Stack,
  Typography,
  CircularProgress,
} from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";

const TicketSchema = Yup.object().shape({
  title: Yup.string().required("عنوان تیکت الزامی است"),
  description: Yup.string().required("متن تیکت الزامی است"),
});

const Ticket = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const formik = useFormik({
    initialValues: { title: "", description: "" },
    validationSchema: TicketSchema,
    onSubmit: async (values) => {
      setIsSubmitting(true);
      try {
        // Simulate a submission
        await new Promise((resolve) => setTimeout(resolve, 2000));
      } finally {
        setIsSubmitting(false);
      }
    },
  });

  return (
    <Box display="flex" justifyContent="center" mt={4}>
      <Stack spacing={3} sx={{ width: { xs: "90%", md: "50%" } }}>
        <Typography
          variant="h5"
          style={{ color: "gray" }}
          textAlign="center"
          gutterBottom
        >
          ارسال پیام
        </Typography>
        <form onSubmit={formik.handleSubmit}>
          <Stack spacing={3}>
            <TextField
              id="title"
              name="title"
              label="عنوان تیکت"
              fullWidth
              value={formik.values.title}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.touched.title && Boolean(formik.errors.title)}
              helperText={formik.touched.title && formik.errors.title}
            />
            <TextField
              id="description"
              name="description"
              label="متن تیکت"
              multiline
              rows={4}
              fullWidth
              value={formik.values.description}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={
                formik.touched.description && Boolean(formik.errors.description)
              }
              helperText={
                formik.touched.description && formik.errors.description
              }
            />
            <Button
              variant="contained"
              color="primary"
              type="submit"
              disabled={isSubmitting}
              sx={{ height: 48 }}
              startIcon={isSubmitting && <CircularProgress size={24} />}
            >
              {isSubmitting ? "در حال ارسال..." : "ارسال"}
            </Button>
          </Stack>
        </form>
      </Stack>
    </Box>
  );
};

export default Ticket;