import { styled } from '@mui/material/styles'
import { Box, IBoxProps } from '@ntpkunity/controls'

export const ControlWrap = styled(
  Box,
  {}
)<Partial<IBoxProps>>(({ theme }) => ({
  '&.control-wrap': {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    width: '100%',
    '.d-block': {
      display: 'block'
    },
    '.text-primary': {
      color: theme.palette.primary.main
    },
    '.text-muted': {
      color: theme.palette.grey[600]
    },
    '.decoration-none': {
      textDecoration: 'none'
    },
    '.fp-link': {
      a: {
        color: 'rgba(0,0,0,0.6)',
        paddingLeft: 15
      }
    },
    '.body2-typo': {
      fontSize: theme.typography.body2.fontSize,
      lineHeight: theme.typography.body2.lineHeight,
      marginBottom: 16,
      fontWeight: theme.typography.body2.fontWeight,
      fontFamily: theme.typography.fontFamily
    },
    '.subtitle2-typo': {
      fontSize: theme.typography.subtitle2.fontSize,
      lineHeight: theme.typography.subtitle2.lineHeight,
      fontWeight: theme.typography.subtitle2.fontWeight,
      fontFamily: theme.typography.fontFamily
    },
    '.u-form-group': {
      '.u-form-control': {
        '&.MuiInputBase-adornedEnd': {
          svg: {
            path: {
              stroke: theme.palette.grey[300]
            }
          }
        }
      }
    },
    '.scrollable-content': {
      transform: 'translateZ(0)',
      textAlign: 'justify',
      [theme.breakpoints.up('md')]: {
        height: 280
      },
      [theme.breakpoints.between(1600, 1920)]: {
        height: 340
      },
      [theme.breakpoints.between(1195, 1500)]: {
        height: 400
      },
      [theme.breakpoints.up('xl')]: {
        height: 440
      },
      [theme.breakpoints.down('md')]: {
        height: 440
      },
      '.viewport': {
        width: '100%',
        height: '100%',
        overflowY: 'scroll',
        paddingRight: 6,
        scrollbarWidth: 'thin',
        scrollbarColor: '#cdcdcd transparent',
        '&::-webkit-scrollbar': {
          width: 7,
          height: 7
        },
        '&::-webkit-scrollbar-track': {
          padding: '0 1px',
          backgroundColor: 'transparent'
        },
        '&::-webkit-scrollbar-thumb': {
          transition: 'all 0.3s',
          backgroundColor: '#cdcdcd',
          borderRadius: theme.shape.borderRadius
        },
        '&::-webkit-scrollbar-thumb:hover': {
          backgroundColor: '#a6a6a6'
        }
      }
    },
    '.progress-steps': {
      marginTop: 56,
      display: 'flex',
      flexDirection: 'row',
      '.progress-step': {
        flex: '0 0 33%',
        maxWidth: '33%',
        paddingRight: 8,
        '&:last-child': {
          paddingRight: 0
        },
        '&.active-step': {
          '.u-progress-bar': {
            '.MuiLinearProgress-bar': {
              backgroundColor: theme.palette.grey[200]
            }
          }
        },
        '&.previous-step': {
          '.u-progress-bar': {
            '.MuiLinearProgress-bar': {
              backgroundColor: theme.palette.primary.main
            }
          }
        }
      },
      '.u-progress-bar': {
        '&.progress-header': {
          backgroundColor: theme.palette.grey[50],
          height: 8
        }
      }
    }
  }
}))

export const ScrollIconWrap = styled(
  Box,
  {}
)<Partial<IBoxProps>>(({ theme }) => ({
  '&.scroll-icon': {
    width: 64,
    margin: 'auto',
    backgroundColor: theme.palette.common.white,
    borderRadius: 40,
    overflow: 'hidden',
    padding: '16px 12px',
    boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.16)',
    border: '1px solid' + theme.palette.grey[100],
    zIndex: 10,
    textAlign: 'center',
    position: 'fixed',
    left: '50%',
    bottom: 0,
    transform: 'translateX(-50%)'
  }
}))
