import { Avatar, Button, FieldsBehavior } from "@ax/components";
import * as S from "./style";
import type { IUserFormState } from "..";

const DataStep = (props: IProps) => {
	const { onClickNext, onClickBack, form, setForm, croppedImageUrl } = props;
	const { name, username, company, position } = form;

	const handleUsernameChange = (value: string) => setForm({ ...form, username: value });
	const handleJobChange = (value: string) => setForm({ ...form, position: value });
	const handleCompanyChange = (value: string) => setForm({ ...form, company: value });

	return (
		<S.Wrapper>
			<S.InfoWrapper>
				<S.Title>Confirm your data</S.Title>
				<S.Text>Please confirm your data to complete your profile.</S.Text>
			</S.InfoWrapper>
			<S.FormWrapper>
				<S.FormImage>
					<Avatar size={180} image={croppedImageUrl} name={name} fontSize={100} bold background />
				</S.FormImage>
				<S.FormFields>
					<FieldsBehavior
						title="Alias"
						name="username"
						fieldType="TextField"
						placeholder="Type an alias"
						mandatory
						value={username}
						onChange={handleUsernameChange}
						prefix="@"
					/>
					<FieldsBehavior
						title="Job title"
						name="position"
						fieldType="TextField"
						placeholder="Type a job title"
						value={position}
						onChange={handleJobChange}
					/>
					<FieldsBehavior
						title="Company"
						name="company"
						fieldType="TextField"
						placeholder="Type a company"
						value={company}
						onChange={handleCompanyChange}
					/>
				</S.FormFields>
			</S.FormWrapper>
			<S.Actions>
				<Button type="button" buttonStyle="text" onClick={onClickBack}>
					Back
				</Button>
				<Button type="button" onClick={() => onClickNext()} disabled={!username.trim().length}>
					Next step
				</Button>
			</S.Actions>
		</S.Wrapper>
	);
};

interface IProps {
	form: IUserFormState;
	setForm: (data: IUserFormState) => void;
	onClickNext: () => void;
	onClickBack: () => void;
	croppedImageUrl: string | null;
}

export default DataStep;
