import {
    FlexRow,
    Panel,
    Spinner,
    Button,
    FlexSpacer,
    ProgressBar,
    Blocker,
    FlexCell,
    LabeledInput,
    TextInput,
    NumericInput,
    DatePicker,
} from '@epam/promo';
import styles from '../../styles/Home.module.scss';
import React from 'react';

export const LoaderExample = () => {
    const renderForm = () => {
        return (
            <FlexCell minWidth={520}>
                <FlexRow
                    columnGap='12'
                    padding='24'
                    vPadding='24'
                >
                    <LabeledInput label='Name'>
                        <TextInput
                            value={'Alex'}
                            onValueChange={() => null}
                        />
                    </LabeledInput>
                    <LabeledInput label='Country'>
                        <TextInput
                            value={'Belarus'}
                            onValueChange={() => null}
                        />
                    </LabeledInput>
                </FlexRow>
                <FlexRow
                    columnGap='12'
                    padding='24'
                    vPadding='24'
                >
                    <LabeledInput label='Age'>
                        <NumericInput
                            max={100}
                            min={0}
                            value={20}
                            onValueChange={() => null}
                        />
                    </LabeledInput>
                    <LabeledInput label='Country'>
                        <DatePicker
                            format={'DD/MM/YYYY'}
                            value={'2042-11-20'}
                            onValueChange={() => null}
                        />
                    </LabeledInput>
                </FlexRow>
                <FlexRow
                    columnGap='12'
                    padding='24'
                    vPadding='24'
                >
                    <FlexSpacer />
                    <Button
                        color='blue'
                        caption='Submit'
                    />
                    <Button
                        color='green'
                        fill='none'
                        caption='Cancel'
                    />
                </FlexRow>
            </FlexCell>
        );
    };

    return (
        <Panel
            cx={'withGap'}
            rawProps={{
                style: { borderRadius: 0 },
            }}
        >
            <FlexRow>
                <ProgressBar
                    progress={45}
                    cx={styles.progressBar}
                />
            </FlexRow>
            <FlexRow>
                <div style={{ position: 'relative' }}>
                    {renderForm()}
                    <Blocker isEnabled={true} />
                </div>
            </FlexRow>
            <FlexRow>
                <Spinner cx={styles.spinner} />
            </FlexRow>
        </Panel>
    );
};
