import * as React from 'react'
import * as cx from 'classnames'
import { Link as Route} from 'react-router-dom'
import { StylableComponent } from '../../theme'
import { LinkProps, Sizes } from '../interfaces'
import { Text } from './text'
import { BaseText } from '../base'

const styles = require('../../../../src/components/text/web/text.scss')

/**
 * Annoyingly React Router doesn't support external links
 * So we have to wrap it and check if the ink is external
 */
export class Link extends BaseText<LinkProps> {

    public render() {

        const { to, children, id } = this.props

        const childProps: any = {
            id,
            className: this.classNames(),
            style: this.styles(),
        }

        return to.indexOf('http') !== -1
            ? <a href={to} {...childProps}>{children}</a>
            : <Route to={to} {...childProps}>{children}</Route>
    }

    public styles() {
        return {
            ...(this.props as any).style,
            color: this.primary(),
            fontSize: this.sizes[(this.props as any).size || 'md'],
        }
    }

    public color = () => this.primary()
}