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

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

import { SettingsSection } from '../settings-section';
import { OptOutEmailPreview } from '../email-preview/opt-out-email-preview';

import * as Styles from './opt-out-message.module.less';

export interface OptOutMessageState {
    subjectLine: InputFieldState<string | undefined>;
    header: InputFieldState<string | undefined>;
    body: TextAreaFieldState<string | undefined>;
    buttonText: InputFieldState<string | undefined>;
    monthsLimit: InputFieldState<number | undefined>;
    enabled: CheckboxFieldState;
    autoSuppressionEnabled: CheckboxFieldState;
}
export interface OptOutMessageProps {
    formState: OptOutMessageState;
    layout?: LayoutProps['type'];
    className?: string;
    onHandleClickEnable?(checked: boolean): void;
}

export const OptOutMessage: FC<OptOutMessageProps> = observer(
    ({ onHandleClickEnable, formState, layout, className }) => {
        const {
            subjectLine,
            header,
            body,
            buttonText,
            monthsLimit,
            enabled,
            autoSuppressionEnabled,
        } = formState;

        const [isPreviewOpen, setIsPreviewOpen] = useState(false);
        const openPreview = useCallback(() => setIsPreviewOpen(true), [setIsPreviewOpen]);
        const closePreview = useCallback(() => setIsPreviewOpen(false), [setIsPreviewOpen]);

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

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

        return (
            <SettingsSection
                layout={layout}
                className={classnames(Styles.outOutMessage, className)}
                qaPrefix="qa-opt-out-message"
                title="Opt-Out Message"
                text={
                    <Fragment>
                        <div>
                            If customers haven’t <b>opened</b> one of your emails in a set time
                            frame, you can send an opt-out message to allow them to set their email
                            preferences.
                        </div>
                        <ToggleSwitch
                            label="Enable"
                            onChange={handleConfirmed}
                            checked={enabled.value}
                            className="m-t-2 qa-opt-out-message-enable"
                        />
                    </Fragment>
                }
            >
                <Text bold className="m-b-2">
                    Opt-Out Email Content
                </Text>
                <Form className="m-b-0-i">
                    <Form.Input
                        className="m-b-2-i qa-opt-out-message-subject-line"
                        value={subjectLine.value}
                        onChange={subjectLine.onChangeHandler}
                        error={subjectLine.hasError}
                        label="Subject Line"
                        fluid
                        disabled={!enabled.value}
                    />
                    <Form.Input
                        className="m-b-2-i qa-opt-out-message-header"
                        value={header.value}
                        onChange={header.onChangeHandler}
                        error={header.hasError}
                        label="Header"
                        fluid
                        disabled={!enabled.value}
                    />
                    <Form.TextArea
                        className="m-b-2-i qa-opt-out-message-body-copy"
                        label="Body Copy"
                        value={body.value}
                        onChange={body.onChangeHandler}
                        error={body.hasError}
                        rows={2}
                        disabled={!enabled.value}
                    />
                    <Form.Input
                        className={classnames(
                            Styles.buttonInput,
                            'm-b-3-i qa-opt-out-message-button-text',
                        )}
                        value={buttonText.value}
                        onChange={buttonText.onChangeHandler}
                        error={buttonText.hasError}
                        label="Button Text"
                        disabled={!enabled.value}
                    />
                    <Button
                        className="qa-opt-out-message-preview-email"
                        primary
                        onClick={openPreview}
                        outline
                        small
                        disabled={!enabled.value}
                    >
                        Preview Email
                    </Button>
                    <hr />
                </Form>
                <Stack alignItems="center" wrap="wrap">
                    <Text className="m-b-1">Send when a recipient hasn’t opened an email in</Text>
                    <Form.Input
                        className={classnames(Styles.input, 'qa-opt-out-message-months', 'm-b-0')}
                        value={monthsLimit.value}
                        onChange={monthsLimit.onChangeHandler}
                        error={monthsLimit.hasError}
                        disabled={!enabled.value}
                    />
                    <Text className="m-b-1">months.</Text>
                </Stack>
                <Form.Checkbox
                    className={classnames('m-t-2-i', 'qa-opt-out-message-auto-suppress')}
                    checked={autoSuppressionEnabled.value}
                    onChange={autoSuppressionEnabled.onChangeHandler}
                    disabled={!enabled.value}
                    label="Auto-suppress dormant emails"
                />

                <Confirm
                    title="Disable Opt-Out Messaging"
                    message="Opt-Out messaging helps you keep dormant emails out of your audiences. Disabling it could potentially lead to worse email performance. Are you sure?"
                    when={enabled.value}
                />
                <OptOutEmailPreview {...formState} open={isPreviewOpen} onClose={closePreview} />
            </SettingsSection>
        );
    },
);