import { Grid, Column, TextInput, TextInputSkeleton, Row, Button, ButtonSkeleton } from 'carbon-components-react';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { navigate } from '@openmrs/esm-framework';
import styles from './patient.scss';

interface PatientFilterProps {
    // isLoading: boolean;
}

const PatientFilter: React.FC<PatientFilterProps> = ({ }) => {
    const { t } = useTranslation();
    const addNewPatient = () => navigate({ to: '${openmrsSpaBase}/dashboard/patient-create' });
    return (
        <div className={styles.filterContainer}>
            <Row>
                <Column sm={12} md={4} >
                    <div className={styles.basicCard}>
                        <div className={styles.basicCardHeader}>
                            <span>Tìm hồ sơ bệnh án </span>( Bệnh nhân đến khám )
                        </div>
                        <div className={styles.basicCardBody}>
                            <TextInput
                                className={styles.textInput}
                                id="keyword"
                                type="text"
                                labelText="Nhập TÊN, MÃ BA hoặc MÃ THẺ bệnh nhân"
                            />
                        </div>
                    </div>
                </Column>
                <Column sm={12} md={4} >
                    <div className={styles.basicCard}>
                        <div className={styles.basicCardHeader}>
                            <span>Cấp mới hồ sơ bệnh án </span>( Bệnh nhân mới )
                        </div>
                        <div className={styles.basicCardBody}>
                            <div className={styles.textInputButton}>
                                <TextInput
                                    className={styles.textInput}
                                    id="keyword"
                                    type="text"
                                    labelText="Nhập MÃ THẺ bệnh nhân"
                                />
                                <Button
                                    style={{ marginLeft: "10px" }}
                                    onClick={e => {
                                        e.preventDefault();
                                        addNewPatient();
                                    }}
                                >
                                    Cấp mới
                                </Button>

                            </div>
                        </div>

                    </div>
                </Column>
            </Row>

        </div >
    );
};

export default PatientFilter;