import React, { useState } from 'react';
import styled from 'styled-components';
import { Image, Button } from 'react-bootstrap';
import './Sidebar.scss';
import Form from 'react-bootstrap/Form';

interface Props {
    onChange: (data: string) => Promise<void>;
    inputValue?: string | number;
    viewSideBar?: boolean;
}

interface RenderedForm {
    fieldLabel: string;
    stateName: string;
    inputType?: string;
    controlId: string;
    required?: boolean;
}

const SideBar: React.FC<Props> = ({ children, onChange }, props) => {
    const { inputValue } = props;
    const [viewSideBar, setViewSidebar] = useState(true);
    const renderArrowView = (): React.ReactElement => {
        const imageName = viewSideBar ? 'leftChevron' : 'rightChevron';
        return (
            <NavButtonDiv data-testid="sideBar">
                <Button
                    style={{ padding: '5px 10px', cursor: 'pointer' }}
                    variant="light"
                    onClick={(): void => setViewSidebar(!viewSideBar)}>
                    <Image alt="sideBarImage" src={require(`../../assets/images/${imageName}.svg`)} />
                </Button>
            </NavButtonDiv>
        );
    };

    const handleChange = (event: React.BaseSyntheticEvent): void => {
        onChange(event?.target?.value);
    };

    const renderFormDetails = ({ fieldLabel, inputType = 'text', controlId }: RenderedForm): React.ReactElement => {
        return (
            <Form.Group controlId={controlId} style={{ margin: '-25px 6px 13px 6px' }}>
                <Form.Label>{fieldLabel}</Form.Label>
                <Form.Control
                    required
                    placeholder="Search"
                    type={inputType}
                    value={inputValue}
                    onChange={handleChange}
                />
            </Form.Group>
        );
    };

    return (
        <div className={viewSideBar ? 'nav-menu' : 'nav-menu-active'}>
            {renderArrowView()}
            {viewSideBar &&
                renderFormDetails({
                    fieldLabel: '',
                    stateName: 'formioKey',
                    controlId: 'formControlsText',
                })}
            {viewSideBar ? children : null}
        </div>
    );
};

export default SideBar;

const NavButtonDiv = styled.div`
    text-align-last: right;
    padding: 14px;
`;
