import * as React from 'react';
import { Sites, useTopBar } from 'cordova-sites';
import { MemberList } from './MemberList';
import { Card } from 'react-bootstrap-mobile';
import { PartnerTable } from './PartnerTable';
import { Col, Row } from 'react-bootstrap';
import { PrayerCircleSettings } from './PrayercircleSettings';

export type PrayerCircleProps = {};

function PrayerCircle({}: PrayerCircleProps) {
    // Variables

    // States

    // Refs

    // Callbacks

    // Effects
    useTopBar({
        title: 'Prayercircle',
    });

    // Other

    // Render Functions

    return (
        <>
            <Row lg={3} md={2} sm={1}>
                <Col>
                    <Card fullHeight={true}>
                        <PrayerCircleSettings />
                    </Card>
                </Col>
                <Col className="order-md-first" md={6} lg={8}>
                    <Card noPaddingHeight={true}>
                        <MemberList />
                    </Card>
                </Col>
            </Row>
            <Card>
                <PartnerTable />
            </Card>
        </>
    );
}

const tmp = React.memo(PrayerCircle) as typeof PrayerCircle;
export { tmp as PrayerCircle };

Sites.addInitialization((app) => app.addDeepLink('/PrayerCircle', tmp));
