/*
 * This program is part of the OpenLMIS logistics management information system platform software.
 * Copyright © 2017 VillageReach
 *
 * This program is free software: you can redistribute it and/or modify it under the terms
 * of the GNU Affero General Public License as published by the Free Software Foundation, either
 * version 3 of the License, or (at your option) any later version.
 *  
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
 * See the GNU Affero General Public License for more details. You should have received a copy of
 * the GNU Affero General Public License along with this program. If not, see
 * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
 */

import React, { useMemo, useEffect, useState } from 'react';
import { useSelector } from "react-redux";
import { RadioButton } from '../components/radio-button';

import Select from '../../react-components/inputs/select';


const ProgramSelect = ({ offlineService }) => {

    const facility = useSelector(state => state[`facilitiesStockOnHand`][`userHomeFacilityStockOnHand`]);
    
    const programs = facility.supportedPrograms.map(({ id, name }) => ({ value: id, name }));

    const menu = document.getElementsByClassName("header ng-scope")[0];
    
    const [facilityId, setFacilityId] = useState(null);
    const [programId, setProgramId] = useState(null);
    const [programName, setProgramName] = useState(null);
    const [facilityType, setFacilityType] = useState("MyFacility");

    const radioChangeHandler = (e) => {
        setFacilityType(e.target.value);
    };

    useEffect(() => menu.style.display = "", [menu]);

    return (
        <div>
            <div className="page-header-responsive">
                <h2 id='program-select-header'>Stock on Hand</h2>
            </div>
            <div className="page-content">
                <label 
                  id='facility-type-header' 
                  style={{marginBottom: "4px", fontFamily: "Arial", fontSize: "16px"}}
                >
                  Facility Type
                </label>
                <div>
                    <RadioButton
                        changed={radioChangeHandler}
                        id="1"
                        isSelected={facilityType === "MyFacility"}
                        label={`My Facility `}
                        additionalInfo={`(${facility.name})`}
                        value="MyFacility"
                    />
                    <RadioButton
                        changed={radioChangeHandler}
                        id="2"
                        isSelected={facilityType === "SupervisedFacility"}
                        label="Supervised Facility"
                        value="SupervisedFacility"
                    />
                </div>
                <div style={{marginTop: "8px", marginBottom: "8px"}}>
                    <div className='required' style={{marginBottom: "4px", fontFamily: "Arial", fontSize: "16px"}}>
                      <label 
                        id='facility-type-header'
                      >
                        Program
                      </label>
                    </div>
                    <div className='field-full-width' style={{marginBottom: "8px"}}>
                        <Select
                          options={programs}
                          onChange={value => setProgramId(value)}
                        />
                    </div>
                    {facilityType === "SupervisedFacility" && (
                      <>
                        <div className='required' style={{marginBottom: "4px", fontFamily: "Arial", fontSize: "16px"}}> 
                          <label 
                            id='facility-type-header'
                          >
                            Facility
                          </label>
                        </div>
                        <div className='field-full-width' style={{marginBottom: "8px"}}>
                          <Select
                            options={[]}
                            onChange={value => setFacilityId(value)}
                          />
                        </div>
                      </> 
                    )}
                </div>
                <button 
                  className="primary"
                  type="button"
                  style={{ marginTop: '0.5em' }}
                  disabled={!programId}
                >
                  Search
                </button>
            </div>
        </div>
    );
};

export default ProgramSelect;