<bmx-yaml-editor>

<bmx-yaml-editor id="ex-ye" label="Deployment manifest" name="manifest" file-name="harbour-shop.yaml" compare-label="As deployed on Monday" description="Each document is checked against the schema for its kind as you edit. Try replicas: 0, or press Ctrl+Space on a new line under spec to see what can go there."></bmx-yaml-editor>
<p class="note" id="ex-ye-out" role="status" style="margin: 12px 0 0">Checking...</p>

<script type="module">
  await customElements.whenDefined('bmx-yaml-editor');
  const editor = document.getElementById('ex-ye');
  const out = document.getElementById('ex-ye-out');

  // Made-up schemas for a made-up shop's three kinds of document, chosen per document by its `kind`.
  const metadata = {
    type: 'object',
    required: ['name'],
    properties: {
      name: { type: 'string', pattern: '^[a-z0-9-]+$', description: 'Lower-case letters, digits and dashes.' },
      labels: { type: 'object', additionalProperties: { type: 'string' } },
    },
  };
  const deployment = {
    type: 'object',
    required: ['apiVersion', 'kind', 'metadata', 'spec'],
    properties: {
      apiVersion: { const: 'apps/v1' },
      kind: { const: 'Deployment' },
      metadata,
      spec: {
        type: 'object',
        required: ['replicas', 'template'],
        properties: {
          replicas: { type: 'integer', minimum: 1, maximum: 20, description: 'How many copies of the shop run at once.' },
          strategy: { enum: ['RollingUpdate', 'Recreate'], description: 'How new versions replace old ones.' },
          template: {
            type: 'object',
            properties: {
              metadata: { type: 'object', properties: { labels: metadata.properties.labels } },
              spec: {
                type: 'object',
                properties: {
                  containers: {
                    type: 'array',
                    minItems: 1,
                    items: {
                      type: 'object',
                      required: ['name', 'image'],
                      properties: {
                        name: { type: 'string' },
                        image: { type: 'string', pattern: ':[\\w.-]+$', description: 'An image with its version tag.' },
                        ports: { type: 'array', items: { type: 'object', properties: { containerPort: { type: 'integer', minimum: 1, maximum: 65535 } } } },
                        env: { type: 'array', items: { type: 'object', required: ['name'], properties: { name: { type: 'string' }, value: { type: 'string' } } } },
                        resources: { type: 'object', properties: { memory: { type: 'string' }, cpu: { type: 'string' } } },
                      },
                    },
                  },
                },
              },
            },
          },
        },
      },
    },
  };
  const service = {
    type: 'object',
    required: ['kind', 'metadata', 'spec'],
    properties: {
      kind: { const: 'Service' },
      metadata,
      spec: {
        type: 'object',
        properties: {
          type: { enum: ['ClusterIP', 'NodePort', 'LoadBalancer'] },
          ports: { type: 'array', items: { type: 'object', required: ['port'], properties: { port: { type: 'integer', maximum: 65535 }, targetPort: { type: 'integer' } } } },
        },
      },
    },
  };
  const settings = {
    type: 'object',
    properties: { kind: { const: 'ConfigMap' }, metadata, data: { type: 'object', additionalProperties: { type: 'string' } } },
  };

  const deployed = `# Harbour Shop - the web tier and its settings.
apiVersion: apps/v1
kind: Deployment
metadata:
  name: harbour-shop
  labels: &labels
    app: harbour-shop
    tier: web
spec:
  replicas: 2
  strategy: RollingUpdate
  template:
    metadata:
      labels: *labels
    spec:
      containers:
        - name: shop
          image: registry.example.test/harbour-shop:4.1.0
          ports:
            - containerPort: 8080
          env:
            - name: CURRENCY
              value: GBP
            - name: CHECKOUT_TIMEOUT
              value: "30"   # seconds, as text
          resources: &small
            memory: 256Mi
            cpu: 250m
---
apiVersion: v1
kind: Service
metadata:
  name: harbour-shop
spec:
  type: ClusterIP
  ports:
    - port: 80
      targetPort: 8080
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: harbour-shop-settings
data:
  theme: harbour
  # YAML 1.1 tools read the next value as false.
  maintenance: off
`;

  editor.schema = [
    { match: { kind: 'Deployment' }, schema: deployment, name: 'Deployment' },
    { match: { kind: 'Service' }, schema: service, name: 'Service' },
    { match: { kind: 'ConfigMap' }, schema: settings, name: 'Settings' },
  ];
  // Now: one more copy running, and the next version of the image.
  editor.value = deployed.replace('replicas: 2', 'replicas: 3').replace('harbour-shop:4.1.0', 'harbour-shop:4.2.0');
  editor.compareWith = deployed;

  const report = ({ ok, valid, problems }) => {
    const errors = problems.filter(p => p.severity === 'error');
    if (!ok) out.textContent = `Not valid YAML: ${errors[0]?.message ?? ''}`;
    else if (!valid) out.textContent = `${errors.length} problem${errors.length === 1 ? '' : 's'} against the schemas: ${errors[0].message}`;
    else out.textContent = `Valid against each document's schema${problems.length ? ` (${problems.length} note${problems.length === 1 ? '' : 's'})` : ''} - ready to deploy.`;
  };
  editor.addEventListener('bmxValidate', event => report(event.detail));
  await editor.validate();
</script>