import { ContextMenu, Icon } from '@vizality/components';
import React, { useState, memo } from 'react';
import { Messages } from '@vizality/i18n';

export default memo(({ onClose, handleDisplayChange, display: _display }) => {
  const [ display, setDisplay ] = useState(_display);

  return (
    <ContextMenu.Menu navId='vz-addons-list-display-menu' onClose={onClose}>
      <ContextMenu.Group label='Layout'>
        <ContextMenu.RadioItem
          id='compact'
          group='layout'
          label={() => (
            <div className='vz-addon-context-menu-label-inner'>
              <Icon name='layout-compact' size='18' />
              Compact
            </div>
          )}
          checked={display === 'compact'}
          action={() => {
            setDisplay('compact');
            handleDisplayChange('compact');
          }}
        />
        <ContextMenu.RadioItem
          id='cover'
          group='layout'
          label={() => (
            <div className='vz-addon-context-menu-label-inner'>
              <Icon name='layout-cover' size='18' />
              Cover
            </div>
          )}
          checked={display === 'cover'}
          action={() => {
            setDisplay('cover');
            handleDisplayChange('cover');
          }}
        />
        <ContextMenu.RadioItem
          id='card'
          group='layout'
          label={() => (
            <div className='vz-addon-context-menu-label-inner'>
              <Icon name='layout-card' size='18' />
              Card
            </div>
          )}
          checked={display === 'card'}
          action={() => {
            setDisplay('card');
            handleDisplayChange('card');
          }}
        />
        <ContextMenu.RadioItem
          id='list'
          group='layout'
          label={() => (
            <div className='vz-addon-context-menu-label-inner'>
              <Icon name='layout-list' size='18' />
              List
            </div>
          )}
          checked={display === 'list'}
          action={() => {
            setDisplay('list');
            handleDisplayChange('list');
          }}
        />
      </ContextMenu.Group>
    </ContextMenu.Menu>
  );
});
