import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
import { Button, CardMedia, Icon, Tab, Tabs, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
import AndroidPlaceholder from '../../../../assets/onBoarding/android';
import IosPlaceholder from '../../../../assets/onBoarding/ios';
const classes = {
    root: `${PREFIX}-app-root`,
    title: `${PREFIX}-app-title`,
    tabs: `${PREFIX}-app-tabs`,
    tabContent: `${PREFIX}-app-tab-content`,
    summary: `${PREFIX}-app-summary`,
    step: `${PREFIX}-app-step`,
    image: `${PREFIX}-app-image`,
    imageAndroid: `${PREFIX}-app-image-android`,
    action: `${PREFIX}-app-action`,
    button: `${PREFIX}-app-button`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'AppRoot'
})(() => ({}));
export default function App(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    //PROPS
    const { className, step, onCompleteAction } = props;
    // STATE
    const [tab, setTab] = useState(0);
    // HANDLERS
    const handleChange = (event, newValue) => {
        setTab(newValue);
    };
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), _jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => _jsx("strong", { children: chunks })
                                    } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => _jsx("strong", { children: chunks })
                                    } }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => _jsx("strong", { children: chunks })
                                    } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => _jsx("strong", { children: chunks })
                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
}
