<%
    const icons = allTokens.Vector; 
    const colors = allTokens.Color; 
    const gradients = allTokens.Gradient; 
    const spacing = allTokens.EdgeInsets; 
    const font = allTokens.TextStyle; 
%>
//
// <%= file.destination %>
//
<%= fileHeader({file, commentStyle: 'short'}) %>

import 'package:flutter/widgets.dart';

import 'theme.g.dart';
import 'widgets.g.dart';

class <%= file.prefix %>ThemeGallery extends StatelessWidget {
    const <%= file.prefix %>ThemeGallery({
        Key? key,
    }) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return ListView(
            children: [
                <% Object.entries(allTokens).map(function([categoryName, categoryTokens]) { %>const _<%= categoryName %>Section(),<% },); %>
                const SizedBox(height: 20),
            ],
        );
    }   
}
<% Object.entries(allTokens).map(function([categoryName, categoryTokens]) { %>
class _<%= categoryName %>Section extends StatelessWidget {
    const _<%= categoryName %>Section({
        Key? key,
    }) : super(key: key);

    @override
    Widget build(BuildContext context) {
        final theme = <%= file.prefix %>Theme.of(context);
        return Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
                _Header('<%= categoryName %>'),
                <% categoryTokens.map(function(prop) { %> _Token(
                    name: '<%= prop.name %>',
                    child: _<%= categoryName %>(theme.<%= camelCase(categoryName) %>.<%= prop.name %>),
                ),
                <% },); %>
            ],
        );
    }
}
<% },); %>

class _Header extends StatelessWidget {
  const _Header(
    this.text, {
    Key? key,
  }) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 30, left: 10, right: 10, bottom: 10),
        child: Text(
            text,
            style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
            ),
        ),
    );
  }
}

class _Token extends StatelessWidget {
    const _Token({
        Key? key,
        required this.name,
        required this.child,
    }) : super(key: key);

    final String name;
    final Widget child;

    @override
    Widget build(BuildContext context) {
        return Container(
            padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
            child: Row(
                children: [
                    child,
                    const SizedBox(width: 10),
                    Expanded(   
                        child: Wrap(
                            children: [
                                Container(
                                padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                                decoration: BoxDecoration(
                                    color: Color(0xFFEEEEEE),
                                    borderRadius: BorderRadius.circular(10),
                                ),
                                child: Text(
                                    name,
                                    style: TextStyle(
                                    fontSize: 11,
                                    color: Color(0xFF666666),
                                    ),
                                ),
                                ),
                            ],
                        ),
                    ),
                ],
            ),
        );
    }
}

class _Vector extends StatelessWidget {
  const _Vector(this.value,{
    Key? key,
  }) : super(key: key);

  final Vector value;

  @override
  Widget build(BuildContext context) {
    return <%= file.prefix %>Icon(value);
  }
}

class _TextStyle extends StatelessWidget {
  const _TextStyle(this.value,{
    Key? key,
  }) : super(key: key);

  final TextStyle value;

  @override
  Widget build(BuildContext context) {
    return Text('Hello world!', style: value);
  }
}

class _Double extends StatelessWidget {
  const _Double(this.value,{
    Key? key,
  }) : super(key: key);

  final double value;

  @override
  Widget build(BuildContext context) {
    return Text('$value');
  }
}

class _Size extends StatelessWidget {
  const _Size(this.value,{
    Key? key,
  }) : super(key: key);

  final double value;

  @override
  Widget build(BuildContext context) {
    return Text('$value');
  }
}

class _Breakpoint extends StatelessWidget {
  const _Breakpoint(this.value,{
    Key? key,
  }) : super(key: key);

  final double value;

  @override
  Widget build(BuildContext context) {
    return Text('$value');
  }
}

class _EdgeInsets extends StatelessWidget {
  const _EdgeInsets(this.value,{
    Key? key,
  }) : super(key: key);

  final EdgeInsets value;

  @override
  Widget build(BuildContext context) {
    return Container(
            decoration: BoxDecoration(
                color: const Color(0xFFEEEEEE),
                borderRadius: BorderRadius.circular(2),
            ),
            padding: value,
            child:  Container(
            width: 32, 
            height: 32, 
            decoration: BoxDecoration(
                color: const Color(0xFF777777),
                borderRadius: BorderRadius.circular(2),
            ),
        ),
    );
  }
}

class _Color extends StatelessWidget {
  const _Color(this.value,{
    Key? key,
  }) : super(key: key);

  final Color value;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 32,
      height: 32,
      decoration: BoxDecoration(
        color: value,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: const Color(0x22000000),
            blurRadius: 10,
          ),
        ],
      ),
    );
  }
}

class _Gradient extends StatelessWidget {
  const _Gradient(this.value,{
    Key? key,
  }) : super(key: key);

  final Gradient value;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 92,
      height: 92,
      decoration: BoxDecoration(
        gradient: value,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: const Color(0x22000000),
            blurRadius: 10,
          ),
        ],
      ),
    );
  }
}