import React, { useState } from 'react';

import { Box, Form, FormField, Heading, Layer, Select, Text } from 'grommet';

export const Long = () => {
  const options = [
    {
      category: 'SCDEV01',
      label: 'Disaster Recovery Viewer',
      description:
        'View only permissions with no ability to perform operations.',
      location: 'Built-in',
    },
    {
      category: 'HPE GreenLake Platform',
      label: 'Identity domain and SSO administrator',
      description:
        // eslint-disable-next-line max-len
        'Full management of DNS domains and SSO profiles across the organization',
      location: 'Built-in',
    },
  ];
  const [value, setValue] = useState('');
  return (
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    <Box fill align="center" justify="start" pad="large" gap="medium">
      <Layer position="right" full="vertical">
        <Box fill pad="medium" width="medium" gap="small">
          <Heading level={2} margin="none">
            Assign role
          </Heading>
          <Text>Grant access to by assigning</Text>
          <Form>
            <FormField label="Role" required name="select" htmlFor="select">
              <Select
                id="select"
                name="select"
                placeholder="Select"
                valueKey="label"
                labelKey="label"
                value={value}
                options={options}
                onChange={({ option }) => setValue(option)}
                onSearch={() => {}}
              >
                {(option, index, _options, { selected }) => (
                  <Box
                    direction="row"
                    width="large"
                    justify="between"
                    align="center"
                    pad="small"
                    background={selected ? "brand" : undefined}
                  >
                    <Box>
                      <Text>{option.category}</Text>
                      <Text weight="bold">{option.label}</Text>
                      <Text>{option.description}</Text>
                    </Box>
                    <Text>{option.location}</Text>
                  </Box>
                )}
              </Select>
            </FormField>
          </Form>
        </Box>
      </Layer>
    </Box>
    // </Grommet>
  );
};

Long.args = {
  full: true,
};

export default {
  title: 'Input/Select/Long',
};