import { FC, useCallback } from 'react';
import { observer } from 'mobx-react';

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

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

export interface CompanyEmailReplyToProps {
    replyToEmail: InputFieldState<string | undefined>;
    layout?: LayoutProps['type'];
    className?: string;
}

export const CompanyEmailReplyTo: FC<CompanyEmailReplyToProps> = observer(
    ({ replyToEmail, layout, className }) => {
        const handleReplyToBlur = useCallback(() => {
            replyToEmail.validate();
        }, [replyToEmail]);

        return (
            <SettingsSection
                layout={layout}
                className={className}
                title="Reply-To"
                text="This is where emails will be sent if someone replies to one of your emails."
                qaPrefix="qa-settings-reply-to"
            >
                <Form className="m-b-0-i">
                    <Form.Input
                        className="m-b-0-i qa-settings-reply-to-email-address"
                        value={replyToEmail.value}
                        onChange={replyToEmail.onChangeHandler}
                        error={replyToEmail.hasError}
                        onBlur={handleReplyToBlur}
                        label="Reply-to Email Address"
                        placeholder="info@yourcompany.com"
                        fluid
                    />
                </Form>
            </SettingsSection>
        );
    },
);