/* eslint-disable react/no-array-index-key */
import PropTypes from 'prop-types';
import { Box, Button } from '@mui/material';
import { createTheme, ThemeProvider, styled } from '../Theme';
import colors from '.';

const colorDescriptions = {
  primary:
    "Primary is used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components",
  secondary:
    'Secondary is used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.',
  error: 'Used to represent error, danger, wrong.',
  warning: 'Used to represent potentially dangerous actions or important messages',
  info: 'Used to present information to the user that is neutral and not necessarily important',
  success: 'Used to indicate the successful completion of an action that user triggered.',
  grey: 'Grey (neutral color) is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common.',
  did: 'For DID-related products or components.',
};

// eslint-disable-next-line no-shadow
function ColorsViewer({ colors: tmpColors, prefix = '', itemWidth = 240 }) {
  // 优先展示的一些颜色
  const keys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
  const colorKeys = keys.concat(Object.keys(tmpColors).filter((key) => !keys.includes(key)));
  return (
    <Box
      sx={{
        p: 2,
      }}>
      {colorKeys.map((colorKey, index) => {
        const colorValue = colors[colorKey];
        let colorArray;
        // 考虑 2 层颜色
        if (typeof colorValue === 'object') {
          colorArray = Object.keys(colorValue).map((item) => ({
            name: `${prefix ? `${prefix}.` : ''}${colorKey}.${item}`,
            value: colorValue[item],
          }));
        } else {
          colorArray = [{ name: `${prefix ? `${prefix}.` : ''}${colorKey}`, value: colorValue }];
        }

        // 过滤不是 color 的值
        colorArray = colorArray.filter(
          (item) => typeof item.value === 'string' && (item.value.startsWith('#') || item.value.startsWith('rgb'))
        );

        if (colorArray.length === 0) {
          return null;
        }

        return (
          <Box
            key={index}
            style={{ borderBottom: '1px solid #ddd' }}
            sx={{
              p: 2,
            }}>
            {colorDescriptions[colorKey] && (
              <Box
                style={{ borderLeft: '2px solid #bbb' }}
                sx={{
                  color: 'grey.700',
                  fontSize: 16,
                  m: 1,
                  pl: 1,
                }}>
                {colorDescriptions[colorKey]}
              </Box>
            )}
            <Box
              sx={{
                display: 'flex',
                flexWrap: 'wrap',
                alignItems: 'center',
              }}>
              {colorArray.map(({ name, value }) => (
                <Box
                  key={name}
                  sx={{
                    display: 'flex',
                    width: itemWidth,
                    m: 1,
                  }}>
                  <Box
                    sx={{
                      flexShrink: 0,
                      width: 40,
                      height: 40,
                      bgcolor: value,
                      boxShadow: 1,
                    }}
                  />
                  <Box
                    sx={{
                      display: 'flex',
                      flexDirection: 'column',
                      ml: 1,
                      fontSize: 14,
                      color: '#999',
                    }}>
                    <Box>{name}</Box>
                    <Box>{value}</Box>
                  </Box>
                </Box>
              ))}
            </Box>
          </Box>
        );
      })}
    </Box>
  );
}

ColorsViewer.propTypes = {
  colors: PropTypes.object.isRequired,
  prefix: PropTypes.string,
  itemWidth: PropTypes.number,
};

export default {
  title: 'Theme/Colors',
  parameters: {
    docs: {
      description: {
        component: 'A collection of common colors that are compatible with the Material UI theme palette.',
      },
    },
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=740%3A1506',
    },
  },
};

export function DefaultAbtColors() {
  return <ColorsViewer colors={colors} />;
}

DefaultAbtColors.storyName = 'default (ABT colors)';

export function MuiThemePalette() {
  const _muiTheme = createTheme();
  return <ColorsViewer colors={_muiTheme.palette} />;
}

MuiThemePalette.storyName = 'mui theme#palette';

export function ColorsStyledComponents() {
  return (
    <StyledComponentTestBox>
      <pre>{`
          const StyledComponentTestBox = styled('div')\`
            padding: 16px;
            background-color: \${colors.success.main};
          \`;
        `}</pre>
    </StyledComponentTestBox>
  );
}

ColorsStyledComponents.storyName = 'colors & styled-components';

export function MuiThemeBoxButton() {
  const _muiTheme = createTheme();
  return (
    <ThemeProvider theme={_muiTheme}>
      <Box
        sx={{
          m: 1,
        }}>
        <Button variant="contained" color="primary">
          Button[color="primary"]
        </Button>
      </Box>
      <Box
        sx={{
          m: 1,
        }}>
        <Button variant="contained" color="secondary">
          Button[color="secondary"]
        </Button>
      </Box>
      <Box
        variant="contained"
        sx={{
          bgcolor: 'warning.main',
          m: 1,
          p: 1,
        }}>
        Box[bgcolor="warning.main"]
      </Box>
      <Box
        variant="contained"
        sx={{
          bgcolor: 'error.light',
          m: 1,
          p: 1,
        }}>
        Box[bgcolor="error.light"]
      </Box>
    </ThemeProvider>
  );
}

MuiThemeBoxButton.storyName = 'mui theme & Box/Button';

const StyledComponentTestBox = styled('div')`
  padding: 16px;
  background-color: ${colors.success.main};
`;
