import { SwitchItem } from '@vizality/components/settings';
import React, { memo, useEffect } from 'react';
import { useFilter } from '@vizality/hooks';
import { Messages } from '@vizality/i18n';

export default memo(({ builtin, search = '' }) => {
  const items = [
    {
      search: [
        Messages.VIZALITY_SETTINGS_TRANSPARENT_WINDOW,
        Messages.VIZALITY_SETTINGS_TRANSPARENT_WINDOW_DESC
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_TRANSPARENT_WINDOW_DESC}
          value={true}
          onChange={() => {
            try {
              void 0;
            } catch (err) {
              builtin.error(err);
            }
          }}
          info={Messages.VIZALITY_SETTINGS_TRANSPARENT_WINDOW_INFO.format()}
          requiresRestart
        >
          {Messages.VIZALITY_SETTINGS_TRANSPARENT_WINDOW}
        </SwitchItem>
    }
  ];

  const [ query, setQuery, filteredResults ] = useFilter({
    keys: [ 'search' ],
    data: items
  });

  useEffect(() => {
    setQuery(search);
  }, [ search ]);

  return filteredResults.map(result => result.render(query));
});
