import * as React from 'react';
import { Control } from './constants';


export interface PagerControlProps {
    control: Control
    onPagerItemClicked: (action: string) => void;
    isSelected: boolean;
    styles: PagerControlStyles;
    id?: string;
    name?: string;
}

export interface PagerControlStyles {
    PagerItemSelected?: any;
    PagerItemUnselected?: any;
    PagerItemContent?: any;
}

export const PagerControl = (props: PagerControlProps) => {
    const Styles: PagerControlStyles = props.styles;

    const pageItemContent: JSX.Element = (
        <Styles.PagerItemContent id={props.id && props.id + '-pager-control-item-content'} name={props.name && props.name + '-pager-control-item-content'}>
            {props.control.display}
        </Styles.PagerItemContent>
    );

    return (
        props.isSelected
            ?
            <Styles.PagerItemSelected onClick={(e) => props.onPagerItemClicked(props.control.action)} children={pageItemContent} id={props.id && props.id + '-pager-control-item-selected'} name={props.name && props.name + '-pager-control-item-selected'} />
            :
            <Styles.PagerItemUnselected onClick={(e) => props.onPagerItemClicked(props.control.action)} children={pageItemContent} id={props.id && props.id + '-pager-control-item-unselected'} name={props.name && props.name + '-pager-control-item-unselected'} />
    );
}