import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => {
  return {
    standardList: {
      '.ant-card-head': { borderBottom: 'none' },
      '.ant-card-head-title': { padding: '24px 0', lineHeight: '32px' },
      '.ant-card-extra': { padding: '24px 0' },
      '.ant-list-pagination': { marginTop: '24px', textAlign: 'right' },
      '.ant-avatar-lg': { width: '48px', height: '48px', lineHeight: '48px' },
      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        '.ant-list-item-content': {
          display: 'block',
          flex: 'none',
          width: '100%',
        },
        '.ant-list-item-action': {
          marginLeft: '0',
        },
      },
    },
    headerInfo: {
      position: 'relative',
      textAlign: 'center',
      '& > span': {
        display: 'inline-block',
        marginBottom: '4px',
        color: token.colorTextSecondary,
        fontSize: token.fontSize,
        lineHeight: '22px',
      },
      '& > p': {
        margin: '0',
        color: token.colorTextHeading,
        fontSize: '24px',
        lineHeight: '32px',
      },
      '& > em': {
        position: 'absolute',
        top: '0',
        right: '0',
        width: '1px',
        height: '56px',
        backgroundColor: token.colorSplit,
      },
      [`@media screen and (max-width: ${token.screenSM}px)`]: {
        marginBottom: '16px',
        '& > em': {
          display: 'none',
        },
      },
    },
    listContent: {
      fontSize: '0',
      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        marginLeft: '0',
        '& > div': {
          display: 'block',
          marginBottom: '8px',
          marginLeft: '0',
        },
      },
      [`@media screen and (max-width: ${token.screenSM}px)`]: {
        '& > div': {
          display: 'block',
          marginBottom: '8px',
          marginLeft: '0',
        },
      },
      [`@media screen and (max-width: ${token.screenMD}px)`]: {
        '& > div': {
          display: 'block',
          marginBottom: '8px',
          marginLeft: '0',
        },
        '& > div:last-child': {
          top: '0',
          width: '100%',
        },
      },
      [`@media screen and (max-width: ${token.screenLG}px) and (min-width: @screen-md)`]: {
        '& > div': {
          display: 'block',
          marginBottom: '8px',
          marginLeft: '0',
        },
        '& > div:last-child': {
          top: '0',
          width: '100%',
        },
      },
      [`@media screen and (max-width: ${token.screenXL}px)`]: {
        '& > div': {
          marginLeft: '24px',
        },
        '& > div:last-child': {
          top: '0',
        },
      },
      '@media screen and (max-width: 1400px)': {
        textAlign: 'right',
        '& > div:last-child': {
          top: '0',
        },
      },
    },
    listContentItem: {
      display: 'inline-block',
      marginLeft: '40px',
      color: token.colorTextSecondary,
      fontSize: token.fontSize,
      verticalAlign: 'middle',
      '> span': { lineHeight: '20px' },
      '> p': { marginTop: '4px', marginBottom: '0', lineHeight: '22px' },
      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        display: 'block',
        marginBottom: '8px',
        marginLeft: '0',
        width: '100%',
      },
    },
    extraContentSearch: {
      width: '272px',
      marginLeft: '16px',
      [`@media screen and (max-width: ${token.screenSM}px)`]: {
        width: '100%',
        marginLeft: '0',
      },
    },
    listCard: {
      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        '.ant-card-head-title': {
          overflow: 'open',
        },
      },
      [`@media screen and (max-width: ${token.screenMD}px)`]: {
        '.ant-radio-group': {
          display: 'block',
          marginBottom: '8px',
        },
      },
    },
    standardListForm: {
      '.ant-form-item': {
        marginBottom: '12px',
        '&:last-child': {
          marginBottom: '32px',
          paddingTop: '4px',
        },
      },
    },
    formResult: {
      width: '100%',
      "[class^='title']": { marginBottom: '8px' },
    },
    iconUploader: {
      width: 20,
      height: 20,
      objectFit: 'contain',
      border: '1px dashed #ddd',
      borderRadius: 2,
      cursor: 'pointer',
    },
    iconList: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: 8,
      marginBottom: 16,
    },
    storyList: {
      padding: '24px',
    },
    toolbar: {
      marginBottom: '24px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    storyDetail: {
      padding: '12px',
    },
    pageHeader: {
      padding: 0,
      marginBottom: '24px',
    },
    card: {
      maxWidth: '800px',
      margin: '0 auto',
    },
    date: {
      fontSize: '16px',
      color: token.colorTextSecondary,
      marginBottom: '20px',
      fontWeight: 'bold',
    },
    cover: {
      width: '100%',
      height: '300px',
      overflow: 'hidden',
      borderRadius: '4px',
      marginBottom: '20px',
      img: {
        width: '100%',
        height: '100%',
        objectFit: 'cover',
      },
    },
    description: {
      fontSize: '16px',
      lineHeight: '1.8',
      color: token.colorText,
      whiteSpace: 'pre-wrap',
    },
    subItems: {
      marginTop: '20px',
    },
    subItem: {
      display: 'flex',
      marginBottom: '15px',
      padding: '10px',
      backgroundColor: token.colorFillAlter,
      borderRadius: '4px',
      '&:last-child': {
        marginBottom: 0,
      },
    },
    subItemDate: {
      fontWeight: 'bold',
      minWidth: '120px',
      color: token.colorTextSecondary,
    },
    subItemContent: {
      flex: 1,
      color: token.colorText,
    },
    timelineItem: {
      cursor: 'pointer',
      transition: 'all 0.3s',
      '&:hover': {
        transform: 'translateY(-4px)',
        boxShadow: token.boxShadow,
      },
    },
  };
});

export default useStyles;
