import React from 'react';
import { Padder } from './Padder';
import { Button } from './Button'

import { Link } from 'react-router-dom'

import { ArrowLeft, Settings } from 'react-feather';
import { IconButton } from './IconButton';

import '../styles/sidebar.css';

export const Sidebar = ({ sectionOne, sectionTwo, icons, width, logo, title }) => {

    const sidebarWidth = width > 150 ? width : 250
    const sectionTwoItems = sectionTwo ? sectionTwo : []

    return (
        <div className='sticky-sidebar' style={{ width: sidebarWidth }}>
            <Padder top="2em" left="2.5em">
                
                {logo? 
                <img style={{ height: 38, paddingTop: 10 }} src={logo} />
                :
                <h4>{title}</h4>
                }
            </Padder>

            <div style={{ overflowY: 'scroll', height: '70vh' }}>
                <Padder top="2em" left="1.5em" right="1.5em" bottom="3em">

                    {sectionOne.map(item => (
                        <Link to={item.link} style={{ width: '100%' }}>
                            <Button style={{ marginBottom: '0.7em' }} isActive={item.active} appearance="minimal" align="start" isFullWidth>{item.text}</Button>
                        </Link>
                    ))}
                </Padder>

                {sectionTwoItems.length > 0 &&
                    <>

                        <Padder left="1.5em" right="1.5em">
                            <hr></hr>
                            {sectionTwo.map(item => (
                                <Link to={item.link} style={{ width: '100%' }}>
                                    <Button style={{ marginBottom: '0.7em' }} isActive={item.active} appearance="minimal" align="start" isFullWidth>{item.text}</Button>
                                </Link>
                            ))}
                        </Padder>
                    </>
                }
            </div>

            {icons && icons.length > 0 &&
                <Padder left="1.5em" right="1.5em">
                    <div style={{ position: 'absolute', display: 'flex', bottom: 15 }}>
                        {icons.map(icon => {
                            if (icon.link) {
                                return (<Link to={icon.link} style={{ width: '100%' }}>
                                    <IconButton style={{ marginRight: '0.7em' }} icon={icon.icon} />
                                </Link>
                                );
                            } else if (icon.action) {
                                return <IconButton style={{ marginRight: '0.7em' }} icon={icon.icon} onClick={icon.action} />
                            }

                        })}
                    </div>
                </Padder>
            }
        </div>
    );
}