import { FC, Fragment, ReactNode } from 'react';
import { observer } from 'mobx-react';
import { FieldState } from 'formstate';
import classNames from 'classnames';

import { Form, LayoutProps, Link } from '@servicetitan/design-system';
import { NumberInput, InputFieldState } from '@servicetitan/form';

import { SettingsSection } from '../settings-section';

import * as Styles from './company-details-form.module.less';

export interface CompanyDetailsProps {
    formState: {
        city: InputFieldState<string | undefined>;
        companyEmail: InputFieldState<string | undefined>;
        companyWebsite?: InputFieldState<string | undefined>;
        companyName: InputFieldState<string | undefined>;
        state: InputFieldState<string | undefined>;
        street: InputFieldState<string | undefined>;
        tagline: InputFieldState<string | undefined>;
        unit: InputFieldState<string | undefined>;
        yearEstablished: FieldState<number | undefined>;
        zipCode: InputFieldState<string | undefined>;
    };
    logoPicker?: ReactNode;
    sectionDescription?: string | JSX.Element;
    layout?: LayoutProps['type'];
    className?: string;
    title?: ReactNode;
    handleCompanyEmailBlur?: () => void;
}

export const MERGE_TAGS_DOCUMENTATION_LINK =
    'https://help.servicetitan.com/Content/Marketing/merge-tags.htm';

const DEFAULT_SECTION_DESCRIPTION = (
    <Fragment>
        Enter these details as you would like them to appear in your campaign. Much of this info can
        be utilized as&nbsp;
        <Link
            href={MERGE_TAGS_DOCUMENTATION_LINK}
            target="_blank"
            primary
            className={classNames(Styles.description, 'qa-settings-company-details-merge-tags')}
        >
            merge tags
        </Link>
        .
    </Fragment>
);

export const CompanyDetails: FC<CompanyDetailsProps> = observer(
    ({
        formState,
        logoPicker,
        sectionDescription = DEFAULT_SECTION_DESCRIPTION,
        handleCompanyEmailBlur = () => {},
        layout,
        className = '',
        title = 'Company Details',
    }: CompanyDetailsProps) => {
        return (
            <SettingsSection
                className={className}
                layout={layout}
                qaPrefix="qa-settings-company-details"
                title={title}
                text={sectionDescription}
            >
                <Form className="m-b-0-i">
                    <Form.Input
                        className="m-b-2-i qa-settings-company-details-company-name"
                        value={formState.companyName.value}
                        onChange={formState.companyName.onChangeHandler}
                        error={formState.companyName.hasError}
                        label="Company Name"
                        placeholder="Enter company name"
                        fluid
                    />
                    <Form.Input
                        className="m-b-2-i qa-settings-company-details-tagline"
                        value={formState.tagline.value}
                        onChange={formState.tagline.onChangeHandler}
                        error={formState.tagline.hasError}
                        label="Tagline / Slogan"
                        placeholder="ex: Trusted since 1956"
                        fluid
                    />
                    <Form.Group className="m-b-2-i">
                        <Form.Input
                            width={8}
                            className="m-b-0-i qa-settings-company-details-address"
                            value={formState.street.value}
                            onChange={formState.street.onChangeHandler}
                            error={formState.street.hasError}
                            label="Street Address"
                            placeholder="801 N Brand Blvd"
                        />
                        <Form.Input
                            width={4}
                            className="m-b-0-i qa-settings-company-details-address"
                            value={formState.unit.value}
                            onChange={formState.unit.onChangeHandler}
                            error={formState.unit.hasError}
                            label="Suite, Unit, etc"
                        />
                    </Form.Group>
                    <Form.Group widths="equal" className="m-b-2-i">
                        <Form.Input
                            className="m-b-0-i qa-settings-company-details-city"
                            value={formState.city.value}
                            onChange={formState.city.onChangeHandler}
                            error={formState.city.hasError}
                            label="City"
                            placeholder="Glendale"
                            fluid
                        />
                        <Form.Input
                            className="m-b-0-i qa-settings-company-details-state"
                            value={formState.state.value}
                            onChange={formState.state.onChangeHandler}
                            error={formState.state.hasError}
                            label="State"
                            placeholder="CA"
                            fluid
                        />
                        <Form.Input
                            className="m-b-0-i qa-settings-company-details-zip-code"
                            value={formState.zipCode.value}
                            onChange={formState.zipCode.onChangeHandler}
                            error={formState.zipCode.hasError}
                            label="Zip Code"
                            placeholder="91203"
                            fluid
                            maxLength={10}
                        />
                    </Form.Group>
                    {formState.companyWebsite ? (
                        <Fragment>
                            <Form.Group widths="equal" className="m-b-2-i">
                                <Form.Input
                                    className="m-b-0-i qa-settings-company-details-company-website"
                                    value={formState.companyWebsite.value}
                                    onChange={formState.companyWebsite.onChangeHandler}
                                    error={formState.companyWebsite.hasError}
                                    label="Company Website"
                                    placeholder="Company Website"
                                    fluid
                                />
                                <Form.Input
                                    className="m-b-0-i qa-settings-company-details-company-email"
                                    value={formState.companyEmail.value}
                                    onChange={formState.companyEmail.onChangeHandler}
                                    error={formState.companyEmail.hasError}
                                    onBlur={handleCompanyEmailBlur}
                                    label="Company Email"
                                    placeholder="hello@yourcompany.com"
                                    fluid
                                />
                            </Form.Group>
                            <Form.Group className="m-b-2-i">
                                <Form.Field
                                    label="Year Established"
                                    className="qa-settings-company-details-company-email"
                                    width={4}
                                    error={formState.yearEstablished.hasError}
                                >
                                    <NumberInput
                                        value={formState.yearEstablished.value}
                                        onChange={formState.yearEstablished.onChange}
                                        error={formState.yearEstablished.hasError}
                                        emptyValue={undefined}
                                        min={1}
                                        max={2099}
                                        useEmptyThousandsSeparator
                                        placeholder="1950"
                                        fluid
                                    />
                                </Form.Field>
                            </Form.Group>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <Form.Group widths="equal" className="m-b-2-i">
                                <Form.Input
                                    className="m-b-0-i qa-settings-company-details-company-email"
                                    width={8}
                                    value={formState.companyEmail.value}
                                    onChange={formState.companyEmail.onChangeHandler}
                                    error={formState.companyEmail.hasError}
                                    onBlur={handleCompanyEmailBlur}
                                    label="Company Email"
                                    placeholder="hello@yourcompany.com"
                                    fluid
                                />
                                <Form.Field
                                    label="Year Established"
                                    className="qa-settings-company-details-company-email"
                                    width={4}
                                    error={formState.yearEstablished.hasError}
                                >
                                    <NumberInput
                                        value={formState.yearEstablished.value}
                                        onChange={formState.yearEstablished.onChange}
                                        error={formState.yearEstablished.hasError}
                                        emptyValue={undefined}
                                        min={1}
                                        max={2099}
                                        useEmptyThousandsSeparator
                                        placeholder="1950"
                                        fluid
                                    />
                                </Form.Field>
                            </Form.Group>
                        </Fragment>
                    )}

                    {logoPicker}
                </Form>
            </SettingsSection>
        );
    },
);