import { Rule } from '../rule.js'
import * as Grid from '../types/aspect/grid.js'

export default [
  Rule({
    type: 'graphic',
    details: {
      id: 'blank-graphic',
      slug: 'blank-graphic',
      title: 'No graphic',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),
  Rule({
    type: 'color',
    details: {
      id: 'blank-color',
      slug: 'blank-color',
      title: 'No color',
      description: '',
      isInternal: true,
      isHidden: true
    },
    props: { red: 255, green: 0, blue: 255, alpha: 1 }
  }),
  Rule({
    type: 'palette',
    details: {
      id: 'blank-palette',
      slug: 'blank-palette',
      title: 'No palette',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),

  // GRAPHICS
  Rule({
    type: 'layout',
    details: {
      id: 'blank-layout',
      slug: 'blank-layout',
      title: 'blank-layout',
      description: '',
      isInternal: true,
      isDefault: true,
      isHidden: true
    },
    props: {
      flexWrap: true,
      columnCount: 1,
      alignItems: 'stretch',
      justifyContent: 'flex-start',
      weights: null
    }
  }),
  // `default-layout` is old version of `blank-layout` that we will need to remove once
  // we are able to migrate HTML in versions. Currently both old & new layouts exist in internal styles.
  Rule({
    type: 'layout',
    details: {
      id: 'default-layout',
      slug: 'default-layout',
      title: 'default-layout',
      description: '',
      isInternal: true,
      isDefault: true,
      isHidden: true
    },
    props: {
      flexWrap: true,
      columnCount: 1,
      alignItems: 'stretch',
      justifyContent: 'flex-start',
      weights: null
    }
  }),
  Rule({
    type: 'decoration',
    details: {
      id: 'blank-decoration',
      slug: 'blank-decoration',
      title: 'No decoration',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),
  Rule({
    type: 'fill',
    details: {
      id: 'blank-fill',
      slug: 'blank-fill',
      title: 'No fill',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),
  Rule({
    type: 'typography',
    details: {
      id: 'blank-typography',
      slug: 'blank-typography',
      title: 'Inherit typography',
      exampleContent: 'Example',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),
  Rule({
    type: 'spacing',
    details: {
      id: 'blank-spacing',
      slug: 'blank-spacing',
      title: 'No spacing',
      description: '',
      isInternal: true,
      isHidden: true
    }
  }),

  Rule({
    type: 'grid',
    details: {
      id: 'custom-grid',
      slug: 'custom',
      title: 'Custom grid',
      description: '',
      isInternal: true,
      isHidden: true
    },
    props: Grid.Props({
      rows: Grid.default5Rows,
      columns: Grid.default12Columns,
      items: []
    })
  }),
  Rule({
    type: 'grid',
    details: {
      id: 'simple-grid',
      slug: 'simple',
      title: 'Default grid',
      description: '',
      isInternal: true,
      isHidden: true
    },
    props: Grid.Props({
      rows: [
        { min: 36, max: 36 },
        { min: 36, max: 36 },
        { min: 36, max: 36 },
        { min: 36, max: null },
        { min: 36, max: 36 },
        { min: 36, max: 36 },
        { min: 36, max: 36 }
      ],
      columns: Array.from(new Array(12)).map(() => Grid.Row({})),
      items: [
        {
          from: { row: 1, column: 1 },
          to: { row: 8, column: 13 }
        }
      ]
    })
  })
]