/**
 * @flow
 */
import { StyleSheet } from 'react-native';
import Fonts from './Fonts';
import Metrics from './Metrics';
import Colors from './Colors';


const Styles = {
  backgroundImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  /**
   * 页面容器
   */
  container: {
    flex: 1,
    //flexDirection: 'column',
    //paddingTop: Metrics.baseMargin,
    backgroundColor: Colors.background,
  },
  /**
   * 全屏长列表
   */
  largeList: {
    backgroundColor: Colors.snow,
  },
  sectionText: {
    ...Fonts.style.normal,
    paddingVertical: Metrics.doubleBaseMargin,
    color: Colors.snow,
    marginVertical: Metrics.smallMargin,
    textAlign: 'center',
  },
  subtitle: {
    color: Colors.snow,
    padding: Metrics.smallMargin,
    marginBottom: Metrics.smallMargin,
    marginHorizontal: Metrics.smallMargin,
  },
  titleText: {
    ...Fonts.style.h2,
    fontSize: 14,
    color: Colors.panther,
  },
  /**
   * 粘性头
   */
  sectionBar: {
    flex: 1,
    backgroundColor: Colors.bloodOrange,
    justifyContent: 'center',
    alignItems: 'center',
  },
  /**
   * 长列表项
   */
  row: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  /**
   * 分割线
   */
  line: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: Colors.line,
  },
  groupContainer: {
    margin: Metrics.smallMargin,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  sectionTitle: {
    ...Fonts.style.h4,
    color: Colors.coal,
    backgroundColor: Colors.ricePaper,
    padding: Metrics.smallMargin,
    marginTop: Metrics.smallMargin,
    marginHorizontal: Metrics.baseMargin,
    borderWidth: 1,
    borderColor: Colors.ember,
    alignItems: 'center',
    textAlign: 'center',
  },
  instructions: {
    textAlign: 'center',
    color: Colors.text,
    marginBottom: 5,
  },
};

export default StyleSheet.create(Styles);
