import '../node_modules/flatpickr/dist/themes/dark.css'
import './date.css'

import flatpickr from 'flatpickr'

let step = 1
let data = {}
let test = {
	"from": "kansas",
	"to": "new jersey",
	"moveSize": "1 Bedroom",
	"moveDate": "2021-08-12",
	"name": "cash",
	"email": "test@test.com",
	"phone": "7038889999"
}
const phone = "[0-9]\{3\}-?[0-9]\{3\}-?[0-9]\{4\}"

def next
	step >= 3 ? step = 4 : step++

def previous
	step <= 2 ? step = 1 : step--

def redirect
	window.location.href = "{base.url}/success"

def post data
	let wpRes = await fetch("{base.url}/wp-json/formine/submissions",{
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			'X-WP-Nonce': nonce
			},
		body: JSON.stringify(data)
	})
	let wpResJson = await wpRes.json!
	console.log wpResJson
	
	const smartMovingUrl = 'https://smartmoving-prod-api2.azurewebsites.net/api/leads/from-provider/v2?providerKey=511fb882-7ce8-4054-9586-ad500049b08a'
	
	let smartMovingData = {
		FullName: data.name,
		PhoneNumber: data.phone,
		Email: data.email,
		MoveDate: data.moveDate.replace(/-/g, ''),
		MoveSize: data.moveSize,
		OriginAddressFull: data.from,
		DestinationAddressFull: data.to
	}
	
	let smartMovingRes = await fetch(smartMovingUrl, {
		method: 'POST',
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify(smartMovingData)
	})

	let smResJson = await smartMovingRes.json!
	console.log smResJson
	
	redirect!

global css @root
	$purp: #421c52
	input, select fs:md p:4 bd:1px solid gray3 c:gray7 c@placeholder:gray4 fl:1 1 auto bgc:white
	button cursor:pointer fs:md px:8 py:4 bg:purple9 bd:none c:white ws:nowrap
	.hover tween:all 1s ease-out bg@hover:#2b0c3a
	.wrapper d:flex fld@md:row fld:column

tag moving-form
	<self>
		<moving-step-{step}>
		# <div[mt:12 max-width:468px]>
		# 	<vert-form>
		# <button @click=post(test)> "Post test data"
		# <div[mt:6]>
		# 	<button @click=previous> "prev"
		# 	<button @click=next> "next"

tag moving-step-1
	<self>
		<form.wrapper[fs:lg] @submit.prevent=next>
			<input[mt@md:0 mt:4] bind=data.from required type="text" placeholder="Moving from Zip or City, State">
			<input[mt@md:0 mt:4] bind=data.to required type="text" placeholder="Moving to Zip or City, State">
			<button[tween:all 0.2s ease-out bgc@hover:#2b0c3a c:white mt@md:0 mt:4 bg:$purp rdr@md:3 fw:900]> "Get Moving"

tag moving-step-2
	<self>
		<form.wrapper[fs:lg] @submit.prevent=next>
			<select[mt@md:0 mt:4] bind=data.moveSize  required>
				<option value="" selected disabled hidden> "Select move size..."
				<option value="Studio Apartment"> "Studio Apartment"
				<option value="1 Bedroom Apartment"> "1 Bedroom Apartment"
				<option value="2 Bedroom Apartment"> "2 Bedroom Apartment"
				<option value="3 Bedroom Apartment"> "3 Bedroom Apartment"
				<option value="1 Bedroom House"> "1 Bedroom House"
				<option value="2 Bedroom House"> "2 Bedroom House"
				<option value="3 Bedroom House"> "3 Bedroom House"
				<option value="4 Bedroom House+"> "4 Bedroom House+"
				<option value="Single Item"> "Single Item"
				<option value="Storage"> "Storage"
				<option value="Office"> "Office"
				<option value="Other/Not Listed"> "Other/Not Listed"
			<button[tween:all 0.2s ease-out bgc@hover:#2b0c3a c:white mt@md:0 mt:4 bg:$purp rd:3 rdr@md:3 fw:900]> "Next"

tag moving-step-3
	def mount
		flatpickr("#date", {
			minDate: "today",
			allowInput: true,
		})

	<self>
		<form.wrapper[fs:lg d:flex fld:column fld@sm:row] @submit.prevent=next>
			<input#date[mt@md:0 mt:2]
			@keypress=e.preventDefault! bind=data.moveDate required type="text" placeholder="Moving date"
			> "Date goes here"
			<button[tween:all 0.2s ease-out bgc@hover:#2b0c3a c:white mt@md:0 mt:4 bg:$purp rd:3 rdr@md:3 fw:900]> "Next"

tag moving-step-4
	<self>
		<form[fld:column d:flex fld@md:row fs:lg] @submit.prevent=post(data)>
			<input[w@md:14rem flg:1] required bind=data.name type="text" placeholder="Name">
			<input[w@md:14rem flg:1 mt@md:0 mt:4] required bind=data.phone type="tel" 
			placeholder="10 Digit Phone Number"
			pattern=phone>
			<input[w@md:14rem flg:1 mt@md:0 mt:4] required bind=data.email type="email" placeholder="Email">
			<button[tween:all 0.2s ease-out bgc@hover:#2b0c3a c:white mt@md:0 mt:4 bg:$purp rd:3 rdr@md:3 fw:900]> "Get Quote"

tag vert-form
	def mount
		flatpickr("#date", {
			minDate: "today",
			allowInput: true,
		})

	<self>
		<form[fs:lg d:flex fld:column] @submit.prevent=post(data)>
			<input[mt:4] bind=data.from required type="text" placeholder="Moving from Zip or City, State">
			<input[mt:4] bind=data.to required type="text" placeholder="Moving to Zip or City, State">
			<select[mt:4] bind=data.moveSize  required>
				<option value="" selected disabled hidden> "Select move size..."
				<option value="Studio Apartment"> "Studio Apartment"
				<option value="1 Bedroom Apartment"> "1 Bedroom Apartment"
				<option value="2 Bedroom Apartment"> "2 Bedroom Apartment"
				<option value="3 Bedroom Apartment"> "3 Bedroom Apartment"
				<option value="1 Bedroom House"> "1 Bedroom House"
				<option value="2 Bedroom House"> "2 Bedroom House"
				<option value="3 Bedroom House"> "3 Bedroom House"
				<option value="4 Bedroom House+"> "4 Bedroom House+"
				<option value="Single Item"> "Single Item"
				<option value="Storage"> "Storage"
				<option value="Office"> "Office"
				<option value="Other/Not Listed"> "Other/Not Listed"
			<input#date[mt:4]
			@keypress=e.preventDefault! bind=data.moveDate required type="text" placeholder="Moving date"
			> "Date goes here"
			<input[mt:4] required bind=data.name type="text" placeholder="Name">
			<input[mt:4] required bind=data.phone type="tel" 
			placeholder="10 Digit Phone Number"
			pattern=phone>
			<input[mt:4] required bind=data.email type="email" placeholder="Email">
			<button[tween:all 0.2s ease-out bgc@hover:#2b0c3a c:white mt:4 bg:$purp rd:3 rdr@md:3 fw:900]> "Get Quote"