// ** MUI Imports
import Grid from '@mui/material/Grid'
import Typography from '@mui/material/Typography'

// ** Custom Components Imports
import CardSnippet from 'src/@core/components/card-snippet'

// ** Demo Components Imports
import ButtonsFab from 'src/views/components/buttons/ButtonsFab'
import ButtonsText from 'src/views/components/buttons/ButtonsText'
import ButtonsIcons from 'src/views/components/buttons/ButtonsIcons'
import ButtonsSizes from 'src/views/components/buttons/ButtonsSizes'
import ButtonsColors from 'src/views/components/buttons/ButtonsColors'
import ButtonsOutlined from 'src/views/components/buttons/ButtonsOutlined'
import ButtonsFabSizes from 'src/views/components/buttons/ButtonsFabSizes'
import ButtonsContained from 'src/views/components/buttons/ButtonsContained'
import ButtonsCustomized from 'src/views/components/buttons/ButtonsCustomized'
import ButtonsWithIconAndLabel from 'src/views/components/buttons/ButtonsWithIconAndLabel'

// ** Source code imports
import * as source from 'src/views/components/buttons/ButtonsSourceCode'

const Buttons = () => {
  return (
    <Grid container spacing={6} className='match-height'>
      <Grid item xs={12}>
        <CardSnippet
          title='Contained'
          code={{
            tsx: source.ButtonsContainedTSXCode,
            jsx: source.ButtonsContainedJSXCode
          }}
        >
          <Typography>
            Use <code>variant=&apos;contained&apos;</code> prop with <code>&lt;Button&gt;</code> component for contained buttons.
          </Typography>
          <ButtonsContained />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Text'
          code={{
            tsx: source.ButtonsTextTSXCode,
            jsx: source.ButtonsTextJSXCode
          }}
        >
          <Typography>
            Use <code>variant=&apos;text&apos;</code> prop with <code>&lt;Button&gt;</code> component for buttons with text only.
          </Typography>
          <ButtonsText />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Outlined'
          code={{
            tsx: source.ButtonsOutlinedTSXCode,
            jsx: source.ButtonsOutlinedJSXCode
          }}
        >
          <Typography>
            Use <code>variant=&apos;outlined&apos;</code> prop with <code>&lt;Button&gt;</code> component for outlined buttons.
          </Typography>
          <ButtonsOutlined />
        </CardSnippet>
      </Grid>
      <Grid item xs={12} md={6}>
        <CardSnippet
          title='Buttons With Icon and Label'
          code={{
            tsx: source.ButtonsWithIconAndLabelTSXCode,
            jsx: source.ButtonsWithIconAndLabelJSXCode
          }}
        >
          <Typography>
            Use <code>startIcon | endIcon</code> prop with <code>&lt;Button&gt;</code> component to add an icon inside a
            button.
          </Typography>
          <ButtonsWithIconAndLabel />
        </CardSnippet>
      </Grid>
      <Grid item xs={12} md={6}>
        <CardSnippet
          title='Icon Buttons'
          code={{
            tsx: source.ButtonsIconsTSXCode,
            jsx: source.ButtonsIconsJSXCode
          }}
        >
          <Typography>
            Use an icon component inside <code>&lt;IconButton&gt;</code> component. For different colors, use{' '}
            <code>color</code> prop with <code>&lt;IconButton&gt;</code> component.
          </Typography>
          <ButtonsIcons />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Button Sizes'
          code={{
            tsx: source.ButtonsSizesTSXCode,
            jsx: source.ButtonsSizesJSXCode
          }}
        >
          <Typography>
            Use <code>size={`{'small' | 'medium' | 'large'}`}</code> prop with <code>&lt;Button&gt;</code> component for
            different sized buttons. To use icon buttons, you need to use <code>size={`{small | large}`}</code> prop
            with <code>&lt;IconButton&gt;</code> component or you can also use <code>fontSize</code> prop with the
            icons.
          </Typography>
          <ButtonsSizes />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Button Colors'
          code={{
            tsx: source.ButtonsColorsTSXCode,
            jsx: source.ButtonsColorsJSXCode
          }}
        >
          <Typography>
            Use <code>color</code> prop with <code>&lt;Button&gt;</code> component for different colored buttons.
          </Typography>
          <ButtonsColors />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Customized Buttons'
          code={{
            tsx: source.ButtonsCustomizedTSXCode,
            jsx: source.ButtonsCustomizedJSXCode
          }}
        >
          <ButtonsCustomized />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Floating Action Button'
          code={{
            tsx: source.ButtonsFabTSXCode,
            jsx: source.ButtonsFabJSXCode
          }}
        >
          <Typography sx={{ mb: 4 }}>
            Use <code>color</code> prop with <code>&lt;Fab&gt;</code> component for different colored Floating Action
            Button and <code>variant=&apos;extended&apos;</code> prop for extended (not round) Floating Action Button.
          </Typography>
          <ButtonsFab />
        </CardSnippet>
      </Grid>
      <Grid item xs={12}>
        <CardSnippet
          title='Floating Action Button Sizes'
          code={{
            tsx: source.ButtonsFabSizesTSXCode,
            jsx: source.ButtonsFabSizesJSXCode
          }}
        >
          <Typography>
            Use <code>size={`{'small' | 'medium' | 'large'}`}</code> prop for different sizes of Floating Action
            Buttons.
          </Typography>
          <ButtonsFabSizes />
        </CardSnippet>
      </Grid>
    </Grid>
  )
}

export default Buttons