import { Form, Formik } from "formik";
import * as Yup from "yup";
import { useMutation } from '@tanstack/react-query';
import { completePWDReset } from '../../../services/services';

const validationSchema = Yup.object().shape({
      url: Yup.string().required("URL is required").matches(/^https?:\/\/[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-]+\.[a-zA-Z]+/, 'Must be like: https://example.mysite.com'),
  })

  const initialValues = {
    url: '',
  };

const URLConfiguration = ({productData}) => {

    let defaultUrl= 'https://'+productData?.internal_url

    // API to set url
    const setURL = useMutation({
        mutationFn: (fields) => {
            return completePWDReset(fields)
        },
        // onSuccess: (res) => {
        // },
        // onError: (err) => {
        //     console.log('err', err)
        // }
    })

    const handleSubmit = (values) => {
        let reqData = {
            url: values.url
        }
        console.log('URL', values.url)
        // setURL.mutate(reqData)
    }

    return <>
        <div className="card card-statistics">
            <div className="card-header">
                <div className="card-heading">
                    <h4 className="card-title">Default URL</h4>
                </div>
            </div>
            <div className="card-body">
                <div className="form-group">
                    {/*<label htmlFor="exampleInputEmail1">Email address</label>*/}
                    <input type="email" className="form-control"
                           aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />
                </div>
                {/*<button type="submit" className="btn btn-primary">Submit</button>*/}
            </div>
        </div>

        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
        >
            {(props) => {
            return (
                <Form className='w-full'>
                    <div className="card card-statistics" style={{backgroundColor:'#7affd92b'}}>
                        <div className="card-header">
                            <div className="card-heading">
                                <h4 className="card-title"  style={{textTransform: 'none'}}>Set your own URL</h4>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="form-group">
                                <label htmlFor="exampleInputEmail1">Enter your full URL <span className={`${(props.errors.url && props.touched.url) && 'text-danger'}`}>{props.errors.url}</span></label>
                                <input value={props.values.url} onChange={props.handleChange} type="text" className="form-control" id="url" aria-describedby="url" placeholder="https://example.mysite.com"/>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </Form>
            );
            }}
        </Formik>

    </>
}

export default URLConfiguration