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

import { BodyText, Form, Icon, LayoutProps, Stack, Text } from '@servicetitan/design-system';
import { InputFieldState } from '@servicetitan/form';
import { tokens } from '@servicetitan/tokens/core';

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

import * as Styles from './company-email-sender.module.less';

const LABEL_ACTION_SIZE = 19;

export interface CompanyEmailSenderProps {
    formState: {
        senderName: InputFieldState<string | undefined>;
        senderDomain: InputFieldState<string | undefined>;
        senderEmail: InputFieldState<string | undefined>;
    };
    isSenderDomainValidatedSuccessfully?: boolean;
    senderTld: string;
    layout?: LayoutProps['type'];
    className?: string;
}

export const CompanyEmailSender: FC<CompanyEmailSenderProps> = observer(
    ({
        formState: { senderDomain, senderName, senderEmail },
        senderTld,
        layout,
        className,
        isSenderDomainValidatedSuccessfully,
    }) => {
        const handleSenderNameChange = useCallback(
            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
                if (data.value.length > 80) {
                    return;
                }

                senderName.onChange(data.value);
            },
            [senderName],
        );

        const handleSenderDomainChange = useCallback(
            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
                if (data.value.length > 30) {
                    return;
                }

                senderDomain.onChange(data.value);
            },
            [senderDomain],
        );

        const handleSenderEmailChange = useCallback(
            (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
                if (data.value.length > 50) {
                    return;
                }

                senderEmail.onChange(data.value);
            },
            [senderEmail],
        );

        return (
            <SettingsSection
                className={className}
                layout={layout}
                title="Sender"
                text="Configure sender name and email."
                qaPrefix="qa-settings-sender"
            >
                <Form className="m-b-0-i">
                    <Form.Group widths="equal" className="m-b-2-i">
                        <Form.Input
                            width={6}
                            className="m-b-0-i qa-settings-sender-name"
                            value={senderName.value}
                            onChange={handleSenderNameChange}
                            error={senderName.hasError}
                            label={
                                <Fragment>
                                    Sender Name &nbsp;&nbsp;
                                    <Text inline size={2} subdued>
                                        max 80 characters
                                    </Text>
                                </Fragment>
                            }
                            placeholder="John Doe"
                            fluid
                        />
                        <Form.Input
                            width={6}
                            labelProps={{
                                action: isSenderDomainValidatedSuccessfully ? (
                                    <Stack spacing={1} alignItems="center">
                                        <BodyText
                                            size="small"
                                            className="c-green-500"
                                            style={{ lineHeight: `${LABEL_ACTION_SIZE}px` }}
                                        >
                                            Validated
                                        </BodyText>
                                        <Icon
                                            color={tokens.colorGreen500}
                                            name="check_circle"
                                            size={LABEL_ACTION_SIZE}
                                        />
                                    </Stack>
                                ) : undefined,
                            }}
                            className="m-b-0-i qa-settings-sender-domain"
                            value={senderDomain.value}
                            onChange={handleSenderDomainChange}
                            error={senderDomain.hasError}
                            label="Sender Domain"
                            placeholder="domain"
                            fluid
                        />
                    </Form.Group>
                    <Form.Group className="m-b-0-i">
                        <Form.Input
                            width={6}
                            className="m-b-0-i qa-settings-sender-email"
                            value={senderEmail.value}
                            onChange={handleSenderEmailChange}
                            error={senderEmail.hasError}
                            label={
                                <Fragment>
                                    Sender Email&nbsp;
                                    <Text inline size={2} subdued>
                                        (domain added automatically)
                                    </Text>
                                </Fragment>
                            }
                            placeholder="john.doe"
                            fluid
                        />
                        <Form.Field label={'\u00A0'}>
                            <div className={Styles.domain}>
                                <Text
                                    size={3}
                                    bold
                                    subdued
                                    className="qa-settings-sender-generated-domain"
                                >
                                    @{senderDomain.$ ? convertDomainName(senderDomain.$) : 'domain'}
                                    .{senderTld}
                                </Text>
                            </div>
                        </Form.Field>
                    </Form.Group>
                </Form>
            </SettingsSection>
        );
    },
);