// src/app/piying/page/component/field-control/select/example/all-props/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
            ],
            size: 'md',
            color: 'primary',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

// src/app/piying/page/component/field-control/select/example/base/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
              { label: 'Option 3', value: '3' },
            ],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

// src/app/piying/page/component/field-control/select/example/color/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({ options: [{ label: 'Option 1', value: '1' }], color: 'primary' }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [{ label: 'Option 2', value: '2' }],
            color: 'secondary',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);

// src/app/piying/page/component/field-control/select/example/multiple/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            multiple: true,
            options: ['option 1', 'option 2', 'option 3'],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

// src/app/piying/page/component/field-control/select/example/picker-ref/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
import { computed } from '@angular/core';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('picker-ref', (actions) => {
        return [
          actions.inputs.patch({
            changeClose: true,
          }),
          actions.inputs.patch({
            trigger: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    content: (field) => {
                      return computed(() => {
                        const pickerValue = field.context['pickerValue']();
                        return pickerValue ?? '[empty]';
                      });
                    },
                  }),
                ];
              }),
              actions.wrappers.patch([{ type: 'div', attributes: { class: 'select' } }]),
            ),
            content: v.pipe(
              v.string(),
              safeDefine.setComponent('option-list', (actions) => {
                return [
                  actions.wrappers.set(['local-filter']),
                  actions.props.patch({
                    options: [
                      { label: 'item0', value: 'item0' },
                      { label: 'item1', value: 'item1' },
                    ],
                  }),
                  actions.class.bottom('bg-white rounded-box shadow'),
                ];
              }),
            ),
          }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('picker-ref', (actions) => {
        return [
          actions.inputs.patch({
            changeClose: true,
          }),
          actions.inputs.patch({
            trigger: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    content: (field) => {
                      return computed(() => {
                        const pickerValue = field.context['pickerValue']();
                        return pickerValue ?? '[empty]';
                      });
                    },
                  }),
                ];
              }),
              actions.wrappers.patch([{ type: 'div', attributes: { class: 'select' } }]),
            ),
            content: v.pipe(
              v.string(),
              safeDefine.setComponent('option-list', (actions) => {
                return [
                  actions.wrappers.set(['local-filter']),
                  actions.props.patchAsync({
                    options: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['options'];
                      });
                    },
                  }),
                  actions.class.bottom('bg-white rounded-box shadow'),
                ];
              }),
            ),
          }),
          actions.props.patch({
            options: ['item0', 'item1'],
          }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('picker-ref', (actions) => {
        return [
          actions.inputs.patch({
            changeClose: false,
          }),
          actions.inputs.patch({
            trigger: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    content: (field) => {
                      return computed(() => {
                        const pickerValue = field.context['pickerValue']();
                        return pickerValue ?? '[empty]';
                      });
                    },
                  }),
                ];
              }),
              actions.wrappers.patch([{ type: 'div', attributes: { class: 'select' } }]),
            ),
            content: v.pipe(
              v.string(),
              safeDefine.setComponent('option-list', (actions) => {
                return [
                  actions.wrappers.set(['local-filter']),
                  actions.props.patchAsync({
                    options: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['options'];
                      });
                    },
                    disableLocalFilter: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['disableLocalFilter'];
                      });
                    },
                  }),
                  actions.inputs.patchAsync({
                    multiple: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['multiple'];
                      });
                    },
                    maxListCount: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['maxListCount'];
                      });
                    },
                  }),
                  actions.class.bottom('bg-white rounded-box shadow'),
                ];
              }),
            ),
          }),
          actions.props.patch({
            options: ['item0', 'item1'],
            enableSearch: false,
            disableLocalFilter: true,
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);

// src/app/piying/page/component/field-control/select/example/picker-ref-multi/content.ts
import * as v from 'valibot';
import { actions, asControl, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
import { computed } from '@angular/core';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.array(v.string()),
      asControl(),
      safeDefine.setComponent('picker-ref', (actions) => {
        return [
          actions.inputs.patch({
            changeClose: false,
          }),
          actions.inputs.patch({
            trigger: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    content: (field) => {
                      return computed(() => {
                        const pickerValue = field.context['pickerValue']();
                        return pickerValue?.join(',') ?? '[empty]';
                      });
                    },
                  }),
                ];
              }),
              actions.wrappers.patch([{ type: 'div', attributes: { class: 'select' } }]),
            ),
            content: v.pipe(
              v.array(v.string()),
              asControl(),
              safeDefine.setComponent('option-list', (actions) => {
                return [
                  actions.wrappers.set(['local-filter']),
                  actions.props.patchAsync({
                    options: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['options'];
                      });
                    },
                  }),
                  actions.inputs.patchAsync({
                    multiple: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['multiple'];
                      });
                    },
                  }),
                  actions.class.bottom('bg-white rounded-box shadow'),
                ];
              }),
            ),
          }),
          actions.props.patch({
            options: ['item0', 'item1'],
            multiple: true,
          }),
        ];
      }),
    ),
    v.pipe(
      v.array(v.string()),
      asControl(),
      safeDefine.setComponent('picker-ref', (actions) => {
        return [
          actions.inputs.patch({
            changeClose: false,
          }),
          actions.inputs.patch({
            trigger: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    content: (field) => {
                      return computed(() => {
                        const pickerValue = field.context['pickerValue']();
                        return pickerValue?.join(',') ?? '[empty]';
                      });
                    },
                  }),
                ];
              }),
              actions.wrappers.patch([{ type: 'div', attributes: { class: 'select' } }]),
            ),
            content: v.pipe(
              v.array(v.string()),
              asControl(),
              safeDefine.setComponent('option-list', (actions) => {
                return [
                  actions.wrappers.set(['local-filter']),
                  actions.props.patchAsync({
                    options: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['options'];
                      });
                    },
                  }),
                  actions.inputs.patchAsync({
                    multiple: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['multiple'];
                      });
                    },
                    maxListCount: (field) => {
                      return computed(() => {
                        return field.context['parentProps']()['maxListCount'];
                      });
                    },
                  }),
                  actions.class.bottom('bg-white rounded-box shadow'),
                ];
              }),
            ),
          }),
          actions.props.patch({
            options: ['item0', 'item1'],
            multiple: true,
            maxListCount: 2,
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);

// src/app/piying/page/component/field-control/select/example/size/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
            ],
            size: 'xs',
          }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
            ],
            size: 'sm',
          }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
            ],
            size: 'md',
          }),
        ];
      }),
    ),
    v.pipe(
      v.string(),
      safeDefine.setComponent('select', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Option 1', value: '1' },
              { label: 'Option 2', value: '2' },
            ],
            size: 'lg',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);