import React, { useState } from "react";
import { connect } from 'react-redux'
import { useTranslation } from 'react-i18next'

import 'react-bootstrap-typeahead/css/Typeahead.css'
import 'react-bootstrap-typeahead/css/Typeahead-bs4.css'

import * as actions from '../../actions'
import { setFilter } from '../../actions/lists'
import { isPending, getFilter, getPagination } from "../../reducers";
import { TAXONDB_SEARCH_REQUEST_ID, TAXONDB_SEARCH_REQUEST_URL, TAXONDB_DETAILS_REQUEST_ID_PREFIX } from '../../settings'

import InputWithAsyncTypeahead from "./InputWithAsyncTypeahead"

import { Form, Container, Row, Col, Button } from "react-bootstrap"

const TaxonDBSearchForm = props => {
    const { t } = useTranslation(['common', 'taxondb'])

    const [fields, setFields] = useState({})


    const handleFormChange = (index, newValue) => {
        const temp = { ...fields }
        if (newValue) {
            temp[index] = newValue
        } else {
            temp[index] = undefined
        }
        setFields(temp)
    }

    const submitForm = () => {
        props.save(fields)
        const newPagination = { ...props.pagination }
        newPagination.currentPage = 1
        // remove previous item details to get updated version from server on demand
        for (let request in props.requests) {
            if (request.startsWith(TAXONDB_DETAILS_REQUEST_ID_PREFIX)) {
                props.removeDetails(request)
            }
        }
        props.search({
            filter: fields,
            pagination: newPagination,
        })

    }

/* NEW */
    const clearFields = () => {
       const temp = { ...fields }
       temp["rodzajGatunek"] = undefined
       temp["dataZbioru"] = undefined
       temp["autorZbioru"] = undefined
       temp["krajZbioru"] = undefined
       temp["taksonNadrzedny"] = undefined
       setFields(temp)
       props.save(fields)
    }


    return (
        <Form>
            <Container>
                <Row>
                    <Form.Group as={Col} sm={6} md={4}>
                        <Form.Label>{t('taxondb:rodzajgatunek')}</Form.Label>
                        <InputWithAsyncTypeahead filter={fields} url="/taxondb/suggest/rodzajGatunek/" autoFocus={true} id="rodzajGatunek" value={props.filter ? props.filter.rodzajGatunek : ''} onCurrentValueChange={newValue => handleFormChange("rodzajGatunek", newValue)} disabled={props.loading}></InputWithAsyncTypeahead>
                    </Form.Group>
                    <Form.Group as={Col} sm={6} md={4}>
                        <Form.Label>{t('taxondb:taksonnadrzedny')}</Form.Label>
                        <InputWithAsyncTypeahead filter={fields} url="/taxondb/suggest/taksonNadrzedny/" value={props.filter ? props.filter.taksonNadrzedny : ''} id="taksonNadrzedny" onCurrentValueChange={newValue => handleFormChange("taksonNadrzedny", newValue)} disabled={props.loading}></InputWithAsyncTypeahead>
                    </Form.Group>
                    <Form.Group as={Col} sm={6} md={4}>
                        <Form.Label>{t('taxondb:autorzbioru')}</Form.Label>
                        <InputWithAsyncTypeahead filter={fields} url="/taxondb/suggest/autorZbioru/" value={props.filter ? props.filter.autorZbioru : ''} id="autorZbioru" onCurrentValueChange={newValue => handleFormChange("autorZbioru", newValue)} disabled={props.loading}></InputWithAsyncTypeahead>
                    </Form.Group>
                    <Form.Group as={Col} sm={6} md={4}>
                        <Form.Label>{t('taxondb:datazbioru')}</Form.Label>
                        <InputWithAsyncTypeahead filter={fields} url="/taxondb/suggest/dataZbioru/" value={props.filter ? props.filter.dataZbioru : ''} id="dataZbioru" onCurrentValueChange={newValue => handleFormChange("dataZbioru", newValue)} disabled={props.loading}></InputWithAsyncTypeahead>
                    </Form.Group>
                    <Form.Group as={Col} sm={6} md={4}>
                        <Form.Label>{t('taxondb:krajzbioru')}</Form.Label>
                        <InputWithAsyncTypeahead filter={fields} url="/taxondb/suggest/krajZbioru/" value={props.filter ? props.filter.krajZbioru : ''} id="krajZbioru" onCurrentValueChange={newValue => handleFormChange("krajZbioru", newValue)} disabled={props.loading}></InputWithAsyncTypeahead>
                    </Form.Group>
                    <Form.Group as={Col} sm={6} md={4} className="d-flex justify-content-end align-items-end">
                        <Button variant="primary" onClick={e => { e.preventDefault(); submitForm() }} disabled={props.loading} type="submit">
                            {t('search')}
                        </Button>
                        <Button variant="secondary"  className="ml-2" onClick= {() => clearFields()} >
                           Clear
                        </Button>
                    </Form.Group>
                </Row>
            </Container>
        </Form>
    )
}

const mapStateToProps = (state) => ({
    loading: isPending(TAXONDB_SEARCH_REQUEST_ID, state),
    filter: getFilter(TAXONDB_SEARCH_REQUEST_ID, state),
    pagination: getPagination(TAXONDB_SEARCH_REQUEST_ID, state),
    requests: state.requests
})

const mapDispatchToProps = dispatch => ({
    search: data => dispatch(actions.postDataAnc(TAXONDB_SEARCH_REQUEST_ID, TAXONDB_SEARCH_REQUEST_URL, data, [], [])),
    save: filter => dispatch(setFilter(TAXONDB_SEARCH_REQUEST_ID, filter)),
    removeDetails: requestId => dispatch(actions.requestRemove(requestId)),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(TaxonDBSearchForm)