import { Button, Select } from "@ax/components";

import WorldMap from "react-timezone-map-select/dist/WorldMap";

import { timezones } from "../../../../Settings/Globals/constants";
import type { IUserFormState } from "..";

import * as S from "./style";

const TimezoneStep = (props: IProps) => {
	const { onClickNext, onClickBack, form, isSaving, setForm } = props;

	const handleChange = (timeZoneName: string) => {
		setForm({ ...form, timezone: timeZoneName });
	};

	return (
		<S.Wrapper>
			<S.Header>
				<S.InfoWrapper>
					<S.Title>Complete your job information</S.Title>
					<S.Text>Select a time zone in the list or click an area on the map.</S.Text>
				</S.InfoWrapper>
				<S.SelectWrapper>
					<Select name="timezone" value={form.timezone} options={timezones} onChange={handleChange} />
				</S.SelectWrapper>
			</S.Header>
			<S.MapWrapper>
				<WorldMap timeZoneName={form.timezone} onChange={handleChange} />
			</S.MapWrapper>
			<S.Actions>
				<Button type="button" buttonStyle="text" onClick={onClickBack}>
					Back
				</Button>
				<Button type="button" onClick={onClickNext} disabled={!form.timezone || isSaving}>
					{isSaving ? "Saving..." : "Save profile"}
				</Button>
			</S.Actions>
		</S.Wrapper>
	);
};

interface IProps {
	form: IUserFormState;
	isSaving: boolean;
	setForm: (data: IUserFormState) => void;
	onClickNext: () => void;
	onClickBack: () => void;
}

export default TimezoneStep;
