import { injectGlobal } from 'styled-components';
import {hexToRgb} from '../utils/Utils';

import font from './niisans-regular.eot';

const defaultFontFamily = 'NIISans, Arial, Helvetica, sans-serif;'

injectGlobal`
    @font-face {
        font-family: 'NIISans';
        src: url(${font}?#iefix) format('embedded-opentype');
    }

    html{
        font-family: ${defaultFontFamily}
    }

    body {
        margin: 0px;
    }
`

const colors = {
    primary: '#ff5a00',
    light: '#fff',
    secondary: '#808080',
    wrong: 'red'
}

const primary = colors.primary;

const defaultPadding = '15px';
const defaultMargin = '15px';

const appBackgroundColor = colors.primary;

const containerMaxWidth = '768px';
const containerWidth = '768px';
const containerBackgroundColor = colors.primary;

const boxBackgroundColor = colors.primary;
const barBackGroundColor = colors.light;
const topBarHeight = '88px';

const textInput = {
    border: {
        size: {
            default: '1px',
            wrong: '2px'
        },

        color: {
            default: colors.secondary,
            wrong: colors.wrong
        }
    },
    color: {
        default: colors.secondary,
        wrong: colors.wrong
    },

    marginTop: defaultMargin,
    marginBottom: defaultMargin,
    padding: defaultPadding,
    borderRadius: '3px',
    placeholder: {
        padding: '5px 10px',
        color: {
            default: colors.secondary,
            wrong: colors.wrong
        },
        background: 'white'
    },
    errorField: {
        color: {
            default: colors.secondary,
            wrong: colors.wrong
        }
    }
}

const planCard = {
    defaultTextColor: 'black',
    border: `1px solid ${colors.secondary}`,
    buttom: `
        color: ${colors.secondary}
    `,
    deColor: colors.secondary,
    paraColor: colors.primary,
    destaque: `
        background: ${colors.primary}
    `

}

const avatar = {
    colors: {
        backgroundColor: colors.light,
        borderColor: 'black',
        fontColor: 'black'
    },
    dimensions: {
        avartarHeight: '32px',
        avartarWidth: '32px',
        borderColor: 'black',
        borderTickness: '1px',
        fontSize: '16px'
    },
    types: {
        borderType: 'solid'
    }

}

const topBar = {
    logo: {
        logoHeight: '20px',
        logoWidth: '85px'
    },

    colors: {
        topBarColor: colors.light
    },

    dimensions: {
        topBarHeight: '88px',
    }
}

const badge = {
    colors: {
        badgeBackgroundColor: colors.primary,
        badgeTextColor: colors.light
    },

    dimensions: {
        badgeWidth: '14px',
        badgeHeight: '14px'
    }

}

const progressBar = {
    colors: {
        progressBarBackGroundColor: colors.action,
        progessBarColor: colors.primary
    }
}

const defaultColors = colors;

const wizard = {
    marginTop: '64px',
    stepMenuItem:{
        height: '60px',
        ball: {
            size: {
                active: '10px',
                default: '2px'
            },
            color: {
                active: colors.primary,
                default: colors.secondary
            }
        },
        bar: {
            color: {
                default: `rgba(${Object.values(hexToRgb(colors.secondary)).join(',')}, 0.6);`,
                passed: colors.primary
            }
        },
        title: {
            color: colors.primary
        }
    }
}

export {
    defaultColors,
    colors,
    primary,
    defaultFontFamily,
    defaultPadding,
    defaultMargin,
    appBackgroundColor,
    containerMaxWidth,
    containerWidth,
    containerBackgroundColor,
    boxBackgroundColor,
    textInput,
    planCard,
    progressBar,
    badge,
    topBar,
    avatar,
    wizard
}

export * from './Theme2';
