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

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

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

export interface CompanyEmailFooterProps {
    formState: {
        legalCopy: TextAreaFieldState<string | undefined>;
        license: InputFieldState<string | undefined>;
        copyrightText: InputFieldState<string | undefined>;
    };
    layout?: LayoutProps['type'];
    className?: string;
}

export const CompanyEmailFooter: FC<CompanyEmailFooterProps> = observer(
    ({ formState: { legalCopy, license, copyrightText }, layout, className }) => {
        return (
            <SettingsSection
                className={className}
                layout={layout}
                title="Footer"
                text={`Your footer will be partially generated from the Company Details section above.
                    Please enter the additional info so that it is CAN-SPAM compliant.`}
                qaPrefix="qa-settings-footer"
            >
                <Form className="m-b-0-i">
                    <Form.TextArea
                        className="m-b-2-i qa-settings-footer-legal-copy"
                        label={
                            <Fragment>
                                Legal Copy&nbsp;
                                <Text inline size={2} subdued>
                                    (optional)
                                </Text>
                            </Fragment>
                        }
                        placeholder="Enter legal copy here"
                        value={legalCopy.value}
                        onChange={legalCopy.onChangeHandler}
                    />
                    <Form.Group className="m-b-0-i">
                        <Form.Input
                            width={6}
                            className="m-b-0-i qa-settings-footer-lic"
                            value={license.value}
                            onChange={license.onChangeHandler}
                            label={
                                <Fragment>
                                    LIC #&nbsp;
                                    <Text inline size={2} subdued>
                                        (optional)
                                    </Text>
                                </Fragment>
                            }
                            placeholder="XYZ12345"
                            fluid
                        />
                        <Form.Input
                            width={6}
                            className="m-b-0-i qa-settings-footer-copyright-text"
                            value={copyrightText.value}
                            onChange={copyrightText.onChangeHandler}
                            label={
                                <Fragment>
                                    Copyright Text&nbsp;
                                    <Text inline size={2} subdued>
                                        (optional)
                                    </Text>
                                </Fragment>
                            }
                            placeholder="© 2022, all right reserved"
                            fluid
                        />
                    </Form.Group>
                </Form>
            </SettingsSection>
        );
    },
);