import React, { useEffect } from 'react'
import { Col, FormGroup, Input, Label, Row } from "reactstrap";
import timeZones from "@/utils/timezones.json";
import { AdminInitialValue } from '@/Types/AdminType';
import Select from 'react-select';
import ImageWithPlaceholder from '@/Components/ImageWithPlaceholder';

const requiredFields: (keyof AdminInitialValue)[] = ['companyName', 'name', 'email', 'phone', 'language', 'taxId'];

const BasicInfoForm = (
    { handleChange, data, toggleComplete, handleSelectChange, setCompanyLogo }:
        { handleChange: any, data: AdminInitialValue, toggleComplete?: any, handleSelectChange: any, setCompanyLogo: any }
) => {
    useEffect(() => {
        const allFieldsValid = requiredFields.every((field) => data[field]);
        console.log(allFieldsValid)
        if (toggleComplete) {
            if (allFieldsValid) {
                toggleComplete(false)
            }
            else {
                toggleComplete(true)
            }
        }
    }, [data])
    return (
        <>
            <Row className="mb-3">
                <Col sm={12} className='d-flex justify-content-end w-100'>
                    <ImageWithPlaceholder
                        src={data.profilePhoto}
                        className="avatarImage shadow"
                        alt=""
                    />
                </Col>
            </Row>
            <Row>
                <Col sm="3">
                    <FormGroup>
                        <Label check>
                            Company Name
                            <span className="text-danger">*</span>
                        </Label>
                        <Input
                            value={data.companyName}
                            onChange={handleChange}
                            name="companyName"
                            type="text"
                            className="form-control"
                            required
                        />
                    </FormGroup>
                </Col>
                <Col sm="3">
                    <FormGroup>
                        <Label check>
                            Title
                            <span className="text-danger">*</span>
                        </Label>
                        <select
                            onChange={handleChange}
                            name="title"
                            className="form-control form-select"
                        >
                            <option value="mr">Mr.</option>
                            <option value="ms">Ms.</option>
                        </select>
                    </FormGroup>
                </Col>
                <Col sm="3">
                    {" "}
                    <FormGroup>
                        <Label check>
                            Name<span className="text-danger">*</span>
                        </Label>
                        <Input
                            value={data.name}
                            onChange={handleChange}
                            name="name"
                            type="text"
                            className="form-control"
                            required
                        />
                    </FormGroup>
                </Col>
                <Col sm="3">
                    <FormGroup>
                        <Label check>Job Title</Label>
                        <Input
                            value={data.jobTitle}
                            onChange={handleChange}
                            name="jobTitle"
                            type="text"
                            className="form-control"
                        />
                    </FormGroup>
                </Col>
            </Row>
            <Row>
                <Col sm="4">
                    <FormGroup>
                        <Label check>
                            Email Address
                            <span className="text-danger">*</span>
                        </Label>
                        <Input
                            value={data.email}
                            onChange={handleChange}
                            name="email"
                            className="form-control"
                            type="text"
                            required
                        />
                    </FormGroup>
                </Col>
                <Col sm="4">
                    <FormGroup>
                        <Label check>
                            Phone Number<span className="text-danger">*</span>
                        </Label>
                        <Input
                            value={data.phone}
                            onChange={handleChange}
                            name="phone"
                            className="form-control"
                            type="number"
                            required
                        />
                    </FormGroup>
                </Col>
                <Col sm="4">
                    <FormGroup>
                        <Label check>Timezone <span style={{ fontWeight: 400, fontSize: '12px' }}>{(data.timezone)}</span></Label>
                        <Select
                            onChange={(e: any) => handleSelectChange('timezone', e.value)}
                            name="timezone"
                            defaultValue={timeZones.find(timezone =>
                                timezone.value == data.timezone)
                            }
                            defaultInputValue={data.timezone}
                            options={timeZones.map((zone) => ({
                                value: zone.label,
                                label: `${zone.label} (${zone.value})`
                            }
                            ))}
                        />
                        {/* {timeZones.map((zone) => (
                                <option value={zone.label}>
                                    {zone.label} ({zone.value})
                                </option>
                            ))}
                        </Select> */}
                    </FormGroup>
                </Col>
            </Row >
            <Row>
                <Col sm="4">
                    <FormGroup>
                        <Label check>
                            Language<span className="text-danger">*</span>
                        </Label>
                        <select
                            onChange={handleChange}
                            name="language"
                            value={data.language}
                            className="form-control form-select"
                        >
                            <option value="">Select Language</option>
                            <option value="english">English</option>
                            <option value="french">French</option>
                            <option value="spanish">Spanish</option>
                            <option value="portugese">Portugese</option>
                        </select>
                    </FormGroup>
                </Col>
                <Col sm="4">
                    <FormGroup className="d-flex flex-column align-items-stretch">
                        <Label check>
                            VAT/TAX ID<span className="text-danger">*</span>
                        </Label>
                        <Input
                            value={data.taxId}
                            onChange={handleChange}
                            name="taxId"
                            className="form-control"
                            type="text"
                            required
                        />
                    </FormGroup>
                </Col>
                <Col sm="4">
                    <FormGroup className="d-flex flex-column align-items-stretch">
                        <Label check>Company Logo</Label>
                        <Input
                            onChange={(e) => setCompanyLogo(e?.target?.files?.[0])}
                            name="companyLogo"
                            s className="form-control"
                            type="file"
                        />
                    </FormGroup>
                </Col>
            </Row>
            <Row className="mb-3">
                {/* <Col sm="4">
                    <FormGroup className="d-flex flex-column align-items-stretch">
                        <Label check>Contract</Label>
                        <Input
                            onChange={handleChange}
                            name="contract"
                            className="form-control"
                            type="file"
                        />
                    </FormGroup>
                </Col> */}
                {/* <Col sm="4" md="4">
                    <Label>New Password</Label>
                    <Input
                        onChange={handleChange}
                        className="form-control"
                        type="text"
                        name="password"
                    />{" "}
                </Col>
                <Col sm="4" md="4">
                    <Label>Retype Password</Label>
                    <Input
                        onChange={handleChange}
                        name="confirmPassword"
                        className="form-control"
                        type="text"
                    />
                </Col> */}
            </Row>
        </>
    )
}

export default BasicInfoForm