import { CompositeViewLinearConfig } from '@dvn/core/components/views/dvn-app-view-composite-view-linear/composite-view-linear-config';
import { AppConfig } from '@dvn/core/models/app-config';
import { AppViewType, DvnAppViewConfig } from '@dvn/core/models/view-config';
import { Component, h, Host } from '@stencil/core';
export class ShowcaseLinearCompositeView {
  render() {
    return (h(Host, null,
      h("dvn-app-view-composite-view-linear", { apiData: undefined, appConfig: AppConfig.decode({
          views: [
            DvnAppViewConfig.decode({
              _id: 'view-1',
              type: AppViewType.TestPlaceholderView,
            }),
            DvnAppViewConfig.decode({
              _id: 'view-2',
              type: AppViewType.TestPlaceholderView,
            }),
            DvnAppViewConfig.decode({
              _id: 'view-3',
              type: AppViewType.TestPlaceholderView,
            }),
            CompositeViewLinearConfig.decode({
              _id: 'view-4',
              type: AppViewType.CompositeViewLinear,
              ui: {
                layout: 'horizontal',
                views: [
                  {
                    title: '1/6 SECTION',
                    viewId: 'view-1',
                    params: {
                      title: 'Allocates 1/6 of the width.',
                    },
                    weights: {
                      small: 1,
                    }
                  },
                  {
                    viewId: 'view-2',
                    params: {
                      title: 'This section does not have a title but the title space is allocated because the other siblings have title. Also, all siblings stretch to fit the height of the tallest child.',
                    },
                    weights: {
                      small: 2,
                    }
                  },
                  {
                    title: '3/6 SECTION',
                    viewId: 'view-3',
                    params: {
                      title: 'Allocates 3/6 of the width.',
                    },
                    weights: {
                      small: 3,
                    }
                  },
                ],
              }
            }),
            CompositeViewLinearConfig.decode({
              _id: 'view-5',
              type: AppViewType.CompositeViewLinear,
              ui: {
                layout: 'horizontal',
                views: [
                  {
                    viewId: 'view-1',
                    params: {
                      title: 'Content',
                    },
                    weights: {
                      small: 2,
                    }
                  },
                  {
                    viewId: 'view-2',
                    params: {
                      title: 'Content',
                    },
                    weights: {
                      small: 4,
                    }
                  },
                ],
              }
            })
          ]
        }), params: {
        // itemId: userToViewId,
        }, view: CompositeViewLinearConfig.decode({
          type: AppViewType.CompositeViewLinear,
          params: undefined,
          ui: {
            layout: 'vertical',
            views: [
              {
                title: 'FIRST SECTION',
                viewId: 'view-1',
                params: {
                  title: 'First content',
                },
                weights: {
                  small: 1,
                }
              },
              {
                title: 'SECOND SECTION',
                description: 'This section has 150px fixed height.',
                viewId: 'view-2',
                params: {
                  title: 'Second content',
                },
                weights: {
                  small: 2,
                },
                height: '150px',
              },
              {
                viewId: 'view-4',
                weights: {
                  small: 3,
                }
              },
              {
                title: 'ANOTHER SECTION',
                viewId: 'view-3',
                params: {
                  title: 'To test the spacing after another composite view.',
                }
              },
              {
                title: '5. SECTION',
                description: 'This wrapper section has the title instead of the child sections. So that the description can cover all the wrapped children.',
                viewId: 'view-5'
              },
              {
                title: 'LAST SECTION',
                viewId: 'view-3',
                params: {
                  title: 'Content',
                },
                weights: {
                  small: 3,
                }
              },
            ],
          }
        }) })));
  }
  static get is() { return "showcase-linear-composite-view"; }
}
