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

import { CheckboxFieldState, InputFieldState, TextAreaFieldState } from '@servicetitan/form';
import { Form, Text, ToggleSwitch, Button, LayoutProps } from '@servicetitan/design-system';
import { useConfirm } from '@servicetitan/confirm';

import { SettingsSection } from '../settings-section';
import { OptInEmailPreview } from '../email-preview/opt-in-email-preview';

import * as Styles from './double-opt-in.module.less';

export const footerText =
    'If you’ve received this email by mistake, no action is needed, just delete this message.';

export interface DoubleOptInPropsFormState {
    emailSubject: InputFieldState<string | undefined>;
    emailHeader: InputFieldState<string | undefined>;
    emailBody: TextAreaFieldState<string | undefined>;
    emailButtonText: InputFieldState<string | undefined>;
    enabled: CheckboxFieldState;
}
export interface DoubleOptInProps {
    formState: DoubleOptInPropsFormState;
    layout?: LayoutProps['type'];
    className?: string;
    onHandleClickEnable?(checkd: boolean): void;
}

export const DoubleOptIn: FC<DoubleOptInProps> = observer(
    ({ onHandleClickEnable, formState, layout, className }) => {
        const { emailSubject, emailHeader, emailBody, emailButtonText, enabled } = formState;
        const [isPreviewOpen, setIsPreviewOpen] = useState(false);
        const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
        const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);

        const handleClickEnable = useCallback(
            (_0: any, checked: boolean) => {
                onHandleClickEnable?.(checked);
                enabled.onChange(checked);
            },
            [enabled, onHandleClickEnable],
        );

        const [Confirm, handleConfirmed] = useConfirm(handleClickEnable);

        return (
            <SettingsSection
                layout={layout}
                className={className}
                qaPrefix="qa-double-opt-in"
                title="Double Opt-In"
                text={
                    <Fragment>
                        <div>
                            Double opt-in ensures that your emails will go to SPAM at a much lower
                            rate. The opt-in confirmation happens after a job has been completed.
                        </div>
                        <ToggleSwitch
                            label="Enable"
                            onChange={handleConfirmed}
                            checked={enabled.value}
                            className="m-t-2 qa-double-opt-in-enable"
                        />
                    </Fragment>
                }
            >
                <Text bold className="m-b-2">
                    Double Opt-In Email Content
                </Text>
                <Form className="m-b-0-i">
                    <Form.Input
                        className="m-b-2-i qa-double-opt-in-subject-line"
                        value={emailSubject.value}
                        onChange={emailSubject.onChangeHandler}
                        error={emailSubject.hasError}
                        label="Subject Line"
                        fluid
                        disabled={!enabled.value}
                    />
                    <Form.Input
                        className="m-b-2-i qa-double-opt-in-header"
                        value={emailHeader.value}
                        onChange={emailHeader.onChangeHandler}
                        error={emailHeader.hasError}
                        label="Header"
                        fluid
                        disabled={!enabled.value}
                    />
                    <Form.TextArea
                        className="m-b-2-i qa-double-opt-in-body-copy"
                        label="Body Copy"
                        value={emailBody.value}
                        onChange={emailBody.onChangeHandler}
                        error={emailBody.hasError}
                        rows={2}
                        disabled={!enabled.value}
                    />
                    <Form.Input
                        className={classnames(
                            Styles.buttonInput,
                            'm-b-2-i qa-double-opt-in-button-text',
                        )}
                        value={emailButtonText.value}
                        onChange={emailButtonText.onChangeHandler}
                        error={emailButtonText.hasError}
                        label="Button Text"
                        disabled={!enabled.value}
                    />
                    <Form.Field
                        className="m-b-3-i"
                        label={
                            <Fragment>
                                Footer&nbsp;
                                <Text inline size={2} subdued>
                                    (automatically added)
                                </Text>
                            </Fragment>
                        }
                    >
                        <Text>{footerText}</Text>
                    </Form.Field>
                    <Button
                        className="qa-double-opt-in-preview-email"
                        primary
                        onClick={openPreview}
                        outline
                        small
                        disabled={!enabled.value}
                    >
                        Preview Email
                    </Button>
                </Form>
                <Confirm
                    title="Disable Double Opt-In"
                    message="Disabling double opt-in could potentially lead to worse email performance and higher spam rates. Are you sure?"
                    when={enabled.value}
                />
                <OptInEmailPreview
                    {...formState}
                    open={isPreviewOpen}
                    footerText={footerText}
                    onClose={closePreview}
                />
            </SettingsSection>
        );
    },
);